/* ================================================================
   全局变量 & 主题 (与原版一致)
   ================================================================ */
        :root {
            --bg: #f3eff7;
            --surface: rgba(250, 247, 253, 0.55);
            --surface2: rgba(246, 242, 250, 0.60);
            --text: #3d3546;
            --text2: #665c72;
            --text3: #8c8099;
            --border: rgba(213, 207, 224, 0.35);
            --accent: #9b8abd;
            --accent2: #7e6fa0;
            --tag-bg: rgba(237, 231, 242, 0.50);
            --tag-text: #5a4e66;
            --tag-active-bg: #9b8abd;
            --tag-active-text: #fff;
            --shadow: 0 8px 32px rgba(60, 30, 80, 0.18);
            --shadow-lg: 0 16px 64px rgba(60, 30, 80, 0.25);
            --overlay: rgba(30, 15, 40, 0.6);
            --card-hover: rgba(245, 240, 249, 0.50);
            --filter-bg: rgba(250, 247, 253, 0.65);
            --modal-bg: rgba(250, 247, 253, 0.82);
            --input-bg: rgba(245, 240, 249, 0.50);
            --danger: #c0392b;
            --success: #5d8a5e;
            --scrollbar-thumb: #d0c4d8;
            --scrollbar-track: #f3eff7;
            --logo-gradient: linear-gradient(135deg, #9b8abd 0%, #7e6fa0 100%);
            --view-tab-active: #9b8abd;
            --view-tab-text: #fff;
            --glass-bg-light: rgba(237, 231, 242, 0.40);
            --coin-color: #f5b342;
            --sort-active-bg: #9b8abd;
            --sort-active-text: #fff;
            --sync-status-bg: rgba(241, 240, 243, 0.50);
            --card-perspective: 1200px;
            --glow-color: rgba(155, 138, 189, 0.12);
            --glow-color2: rgba(125, 100, 160, 0.06);
            --gold: #f5a623;
            --gold-glow: rgba(245, 166, 35, 0.3);
            --bg-gradient-start: #f8f4fc;
            --bg-gradient-end: #ede6f5;
            --announcement-bg: rgba(155, 138, 189, 0.08);
            --announcement-border: rgba(213, 207, 224, 0.30);
            --announcement-text: #3d3546;
            --glass-border: rgba(255, 255, 255, 0.20);
            --glass-shadow: 0 8px 32px rgba(60, 30, 80, 0.18);
            --card-bg-glass: rgba(255, 255, 255, 0.65);
            --card-border-glass: rgba(213, 207, 224, 0.55);
            --backdrop-blur-level: 0px;
            --card-3d-enabled: 0;
            --bg-animation-enabled: 0;
            --glow-play-state: running;
            --accent-light: rgba(155, 138, 189, 0.12);
            --radius: 16px;
            --radius-sm: 10px;

            /* === 头衔稀有度色系（低饱和度，不抢眼） === */
            --tier-bronze: #a8896b;
            --tier-bronze-light: #c4a988;
            --tier-bronze-bg: linear-gradient(135deg, #a08068, #c0a488);
            --tier-silver: #9098a2;
            --tier-silver-light: #b8bfc8;
            --tier-silver-bg: linear-gradient(135deg, #828a96, #aab2bc);
            --tier-gold: #c4a05a;
            --tier-gold-light: #dcc088;
            --tier-gold-bg: linear-gradient(135deg, #b89648, #d4b870);
            --tier-diamond: #8a82a8;
            --tier-diamond-light: #7eb0ac;
            --tier-diamond-bg: linear-gradient(135deg, #8a82a8, #7ea8a4);
        }

        @media (hover: hover) and (prefers-reduced-motion: no-preference) {
            :root {
                --backdrop-blur-level: 12px;
                --card-3d-enabled: 1;
                --bg-animation-enabled: 1;
            }

            .filter-sticky,
            .announcement-bar,
            .modal,
            .view-tab,
            .filter-cat-btn,
            .filter-options-panel,
            .filter-option-tag,
            .sort-btn,
            .theme-toggle,
            .theme-toggle-floating,
            .coin-tip-btn,
            .btn,
            .sync-status,
            .card-user-actions .action-btn,
            .modal .detail-tags span,
            .modal .detail-video-link,
            .modal .detail-link-btn,
            .tag-select-panel .tag-option,
            .add-tag-row input,
            .form-group input,
            .form-group select,
            .form-group textarea,
            .key-input-group input,
            .key-input-group button,
            .toast-notification {
                backdrop-filter: blur(var(--backdrop-blur-level)) saturate(1.3) !important;
                -webkit-backdrop-filter: blur(var(--backdrop-blur-level)) saturate(1.3) !important;
            }

            .gallery-card .card-parallax-bg {
                display: block;
            }

            .bg-glow.g1,
            .bg-glow.g2,
            .bg-glow.g3 {
                animation-play-state: running;
            }
        }

        @media (hover: none),
        (max-width: 768px) {
            :root {
                --backdrop-blur-level: 0px !important;
                --card-3d-enabled: 0 !important;
                --bg-animation-enabled: 0 !important;
                --glow-play-state: paused !important;
            }

            .filter-sticky,
            .announcement-bar,
            .modal,
            .gallery-card,
            .view-tab,
            .filter-cat-btn,
            .filter-options-panel,
            .filter-option-tag,
            .sort-btn,
            .theme-toggle,
            .theme-toggle-floating,
            .coin-tip-btn,
            .btn,
            .sync-status,
            .card-user-actions .action-btn,
            .modal .detail-tags span,
            .modal .detail-video-link,
            .modal .detail-link-btn,
            .tag-select-panel .tag-option,
            .add-tag-row input,
            .form-group input,
            .form-group select,
            .form-group textarea,
            .key-input-group input,
            .key-input-group button,
            .achievement-item,
            .toast-notification,
            .comment-item {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            .bg-glow.g1,
            .bg-glow.g2,
            .bg-glow.g3 {
                animation: none !important;
                opacity: 0.2 !important;
            }

            .gallery-card {
                perspective: none !important;
                transform-style: flat !important;
            }

            .gallery-card:hover {
                transform: translateY(-4px) scale(1.01) !important;
            }

            .gallery-card .card-parallax-bg {
                display: none !important;
            }

            .gallery-card {
                opacity: 0;
                transform: translateY(20px) scale(0.98);
                transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
            }

            .gallery-card.visible {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            .gallery-card:nth-child(1) {
                transition-delay: 0.01s;
            }

            .gallery-card:nth-child(2) {
                transition-delay: 0.02s;
            }

            .gallery-card:nth-child(3) {
                transition-delay: 0.03s;
            }

            .gallery-card:nth-child(4) {
                transition-delay: 0.04s;
            }

            .gallery-card:nth-child(5) {
                transition-delay: 0.05s;
            }

            .gallery-card:nth-child(6) {
                transition-delay: 0.06s;
            }

            .gallery-card:nth-child(7) {
                transition-delay: 0.07s;
            }

            .gallery-card:nth-child(8) {
                transition-delay: 0.08s;
            }

            .gallery-card:nth-child(9) {
                transition-delay: 0.09s;
            }

            .gallery-card:nth-child(10) {
                transition-delay: 0.10s;
            }

            .gallery-card:nth-child(11) {
                transition-delay: 0.11s;
            }

            .gallery-card:nth-child(12) {
                transition-delay: 0.12s;
            }

            .gallery-card:nth-child(13) {
                transition-delay: 0.13s;
            }

            .gallery-card:nth-child(14) {
                transition-delay: 0.14s;
            }

            .gallery-card:nth-child(15) {
                transition-delay: 0.15s;
            }

            .gallery-card:nth-child(16) {
                transition-delay: 0.16s;
            }

            .gallery-card:nth-child(17) {
                transition-delay: 0.17s;
            }

            .gallery-card:nth-child(18) {
                transition-delay: 0.18s;
            }

            .gallery-card:nth-child(19) {
                transition-delay: 0.19s;
            }

            .gallery-card:nth-child(20) {
                transition-delay: 0.20s;
            }
        }

        [data-theme="dark"] {
            --bg: #1e1822;
            --surface: rgba(42, 35, 48, 0.60);
            --surface2: rgba(48, 40, 54, 0.65);
            --text: #e2dae8;
            --text2: #b8a9c4;
            --text3: #8c7d9a;
            --border: rgba(69, 60, 78, 0.40);
            --accent: #b8a2d6;
            --accent2: #9e8abf;
            --tag-bg: rgba(54, 47, 62, 0.50);
            --tag-text: #c4b5d3;
            --tag-active-bg: #b8a2d6;
            --tag-active-text: #1e1822;
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
            --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.50);
            --overlay: rgba(0, 0, 0, 0.75);
            --card-hover: rgba(48, 40, 54, 0.40);
            --filter-bg: rgba(34, 28, 38, 0.70);
            --modal-bg: rgba(42, 35, 48, 0.85);
            --input-bg: rgba(48, 40, 54, 0.55);
            --danger: #e74c3c;
            --success: #6a9b6c;
            --scrollbar-thumb: #4a3d55;
            --scrollbar-track: #1e1822;
            --logo-gradient: linear-gradient(135deg, #b8a2d6 0%, #9e8abf 100%);
            --view-tab-active: #b8a2d6;
            --view-tab-text: #1e1822;
            --glass-bg-light: rgba(54, 47, 62, 0.50);
            --coin-color: #f5b342;
            --sort-active-bg: #b8a2d6;
            --sort-active-text: #1e1822;
            --sync-status-bg: rgba(42, 35, 48, 0.55);
            --glow-color: rgba(155, 138, 189, 0.08);
            --glow-color2: rgba(125, 100, 160, 0.04);
            --gold: #f5a623;
            --gold-glow: rgba(245, 166, 35, 0.15);
            --bg-gradient-start: #1a1520;
            --bg-gradient-end: #241e2b;
            --announcement-bg: rgba(184, 162, 214, 0.06);
            --announcement-border: rgba(69, 60, 78, 0.40);
            --announcement-text: #e2dae8;
            --glass-border: rgba(255, 255, 255, 0.08);
            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
            --card-bg-glass: rgba(255, 255, 255, 0.04);
            --card-border-glass: rgba(255, 255, 255, 0.06);
            --accent-light: rgba(184, 162, 214, 0.15);
        }

        [data-theme="dark"] .header-dropdown-menu {
            background: #2a2330;
        }

        [data-theme="dark"] .texture-card {
            background-color: rgba(48, 42, 54, 0.72);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(155, 138, 189, 0.025) 3px,
                    rgba(155, 138, 189, 0.025) 4px
                );
            border: 1px solid rgba(90, 80, 105, 0.5);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                inset 0 -1px 0 rgba(0, 0, 0, 0.15),
                inset 2px 0 8px rgba(120, 100, 150, 0.06),
                inset -2px 0 8px rgba(120, 100, 150, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.25);
        }

        [data-theme="dark"] .texture-card::before {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 35%),
                radial-gradient(ellipse at 10% 5%, rgba(255, 255, 255, 0.04) 0%, transparent 35%),
                radial-gradient(ellipse at 15% 10%, rgba(155, 138, 189, 0.05) 0%, transparent 50%);
        }

        [data-theme="dark"] .texture-card::after {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }

        [data-theme="dark"] .diary-mobile-bm-btn,
        [data-theme="dark"] .diary-back-btn,
        [data-theme="dark"] .diary-sort-select {
            background: rgba(48, 42, 54, 0.82);
            border-color: rgba(90, 80, 105, 0.5);
            color: #e2dae8;
        }

        [data-theme="dark"] .diary-back-btn:hover {
            background: rgba(54, 47, 62, 0.70);
            border-color: #b8a2d6;
        }

        [data-theme="dark"] .diary-mobile-dropdown {
            background: #2a2330;
            border-bottom-color: rgba(90, 80, 105, 0.5);
        }

        [data-theme="dark"] .diary-mobile-search input {
            background: rgba(48, 42, 54, 0.6);
            border-color: rgba(90, 80, 105, 0.5);
            color: var(--text);
        }

        [data-theme="dark"] .diary-mobile-item {
            border-bottom-color: rgba(90, 80, 105, 0.3);
        }

        [data-theme="dark"] .diary-mobile-item:hover {
            background: rgba(54, 47, 62, 0.5);
        }

        [data-theme="dark"] .diary-mobile-item.active {
            background: rgba(155, 138, 189, 0.18);
        }

        [data-theme="dark"] .diary-mobile-idx {
            background: rgba(90, 80, 105, 0.5);
            color: #b8a9c4;
        }

        [data-theme="dark"] .diary-ribbon .ribbon-tip {
            background: #b8a2d6;
            color: #1e1822;
        }

        [data-theme="dark"] .diary-ribbon .ribbon-tip::after {
            border-right-color: #b8a2d6;
        }

        [data-theme="dark"] .page-header {
            border-bottom-color: rgba(90, 80, 105, 0.5);
        }

        [data-theme="dark"] .diary-page-left::before {
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
        }

        [data-theme="dark"] .empty-diary-hint {
            color: var(--text3);
        }

        [data-theme="dark"] .review-label {
            color: #e2dae8;
        }

        [data-theme="dark"] .toolbar-toggle-btn {
            background: rgba(48, 42, 54, 0.6);
            border-color: rgba(90, 80, 105, 0.5);
            color: #e2dae8;
        }

        [data-theme="dark"] .toolbar-toggle-btn:hover {
            background: rgba(54, 47, 62, 0.70);
        }

        [data-theme="dark"] .text-format-toolbar {
            background: rgba(48, 42, 54, 0.70);
            border-color: rgba(90, 80, 105, 0.5);
        }

        [data-theme="dark"] .format-btn {
            background: rgba(48, 42, 54, 0.82);
            border-color: rgba(90, 80, 105, 0.5);
            color: #e2dae8;
        }

        [data-theme="dark"] .format-btn:hover {
            background: rgba(54, 47, 62, 0.70);
        }

        [data-theme="dark"] .toolbar-divider {
            background: rgba(90, 80, 105, 0.6);
        }

        /* 日记页面强制使用浅色主题 */
        [data-theme="dark"] #diaryPage {
            --diary-bg: #f3eff7;
            --diary-surface: rgba(250, 247, 253, 0.55);
            --diary-text: #3d3546;
            --diary-text2: #665c72;
            --diary-text3: #8c8099;
            --diary-border: rgba(213, 207, 224, 0.35);
            --diary-accent: #9b8abd;
            --diary-accent-light: rgba(155, 138, 189, 0.12);
            --diary-card-hover: rgba(245, 240, 249, 0.50);
            --diary-shadow: 0 8px 32px rgba(60, 30, 80, 0.18);
        }

        [data-theme="dark"] #diaryPage .diary-page-left,
        [data-theme="dark"] #diaryPage .diary-page-right {
            background: rgba(250, 247, 253, 0.82);
            border-color: rgba(213, 207, 224, 0.35);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-page-left::before {
            background: linear-gradient(90deg, rgba(60, 30, 80, 0.08) 0%, transparent 100%);
        }

        [data-theme="dark"] #diaryPage .texture-card {
            background-color: rgba(250, 247, 253, 0.72);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(155, 138, 189, 0.03) 3px,
                    rgba(155, 138, 189, 0.03) 4px
                );
            border-color: rgba(213, 207, 224, 0.5);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .texture-card::before {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 35%),
                radial-gradient(ellipse at 10% 5%, rgba(255, 255, 255, 0.6) 0%, transparent 35%),
                radial-gradient(ellipse at 15% 10%, rgba(155, 138, 189, 0.15) 0%, transparent 50%);
        }

        [data-theme="dark"] #diaryPage .texture-card::after {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
        }

        [data-theme="dark"] #diaryPage .diary-page .game-title,
        [data-theme="dark"] #diaryPage .diary-page .review-title,
        [data-theme="dark"] #diaryPage .diary-page h1,
        [data-theme="dark"] #diaryPage .diary-page h2,
        [data-theme="dark"] #diaryPage .diary-page h3,
        [data-theme="dark"] #diaryPage .diary-page .detail-title,
        [data-theme="dark"] #diaryPage .diary-page .detail-value,
        [data-theme="dark"] #diaryPage .diary-page .detail-label,
        [data-theme="dark"] #diaryPage .diary-page .review-text,
        [data-theme="dark"] #diaryPage .diary-page .game-desc,
        [data-theme="dark"] #diaryPage .diary-page .tag-label,
        [data-theme="dark"] #diaryPage .diary-page .play-date,
        [data-theme="dark"] #diaryPage .diary-page .review-time,
        [data-theme="dark"] #diaryPage .diary-page .play-duration,
        [data-theme="dark"] #diaryPage .diary-page .detail-info-label,
        [data-theme="dark"] #diaryPage .diary-page .detail-info-value {
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-page .detail-info-row {
            border-bottom-color: rgba(213, 207, 224, 0.35);
        }

        [data-theme="dark"] #diaryPage .diary-page .ribbon-tip {
            background: #9b8abd;
            color: #ffffff;
        }

        [data-theme="dark"] #diaryPage .diary-ribbon .ribbon-tip {
            background: #9b8abd;
            color: #ffffff;
        }

        [data-theme="dark"] #diaryPage .diary-ribbon .ribbon-tip::after {
            border-right-color: #9b8abd;
        }

        [data-theme="dark"] #diaryPage .page-header,
        [data-theme="dark"] #diaryPage .diary-page-header,
        [data-theme="dark"] #diaryPage .diary-nav-bar {
            border-bottom-color: rgba(213, 207, 224, 0.35);
            background: rgba(250, 247, 253, 0.82);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-bm-btn,
        [data-theme="dark"] #diaryPage .diary-back-btn,
        [data-theme="dark"] #diaryPage .diary-sort-select {
            background: rgba(250, 247, 253, 0.82);
            border-color: rgba(213, 207, 224, 0.5);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-back-btn:hover {
            background: rgba(245, 240, 249, 0.82);
            border-color: var(--diary-accent);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-dropdown {
            background: #faf7fd;
            border-bottom-color: rgba(213, 207, 224, 0.5);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-search input {
            background: rgba(255, 255, 255, 0.6);
            border-color: rgba(213, 207, 224, 0.5);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-item {
            border-bottom-color: rgba(213, 207, 224, 0.3);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-item:hover {
            background: var(--diary-card-hover);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-item.active {
            background: var(--diary-accent-light);
        }

        [data-theme="dark"] #diaryPage .diary-mobile-idx {
            background: rgba(213, 207, 224, 0.5);
            color: var(--diary-text2);
        }

        [data-theme="dark"] #diaryPage .diary-page .review-label,
        [data-theme="dark"] #diaryPage .diary-page .toolbar-toggle-btn,
        [data-theme="dark"] #diaryPage .diary-page .text-format-toolbar,
        [data-theme="dark"] #diaryPage .diary-page .format-btn {
            background: rgba(250, 247, 253, 0.82);
            border-color: rgba(213, 207, 224, 0.5);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-page .toolbar-divider {
            background: rgba(213, 207, 224, 0.5);
        }

        [data-theme="dark"] #diaryPage .diary-page .format-btn:hover {
            background: rgba(245, 240, 249, 0.82);
        }

        [data-theme="dark"] #diaryPage .empty-diary-hint {
            color: var(--diary-text3);
        }

        [data-theme="dark"] #diaryPage .diary-page .diary-page-nav-btn {
            background: rgba(250, 247, 253, 0.82);
            border-color: rgba(213, 207, 224, 0.5);
            color: var(--diary-text);
        }

        [data-theme="dark"] #diaryPage .diary-page .diary-page-nav-btn:hover:not(:disabled) {
            background: var(--diary-accent-light);
            border-color: var(--diary-accent);
        }

        [data-theme="dark"] #diaryPage .diary-page .diary-page-nav-btn:disabled {
            background: rgba(250, 247, 253, 0.5);
            color: var(--diary-text3);
            border-color: rgba(213, 207, 224, 0.3);
        }

        [data-theme="dark"] #diaryPage .diary-page .diary-page-info {
            color: var(--diary-text2);
        }

        [data-theme="dark"] #diaryPage .diary-page .star-rating .star,
        [data-theme="dark"] #diaryPage .diary-page .star-rating .star.filled {
            color: #f5b342;
        }

        [data-theme="dark"] #diaryPage .diary-page .tag-item {
            background: var(--diary-accent-light);
            border-color: var(--diary-accent);
            color: var(--diary-text2);
        }

        [data-theme="dark"] #diaryPage .diary-page .screenshot-item {
            border-color: rgba(213, 207, 224, 0.5);
        }

        [data-theme="dark"] #diaryPage .diary-cover {
            background:
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(213, 207, 224, 0.03) 2px,
                    rgba(213, 207, 224, 0.03) 4px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 2px,
                    rgba(213, 207, 224, 0.03) 2px,
                    rgba(213, 207, 224, 0.03) 4px
                ),
                linear-gradient(135deg, #f3eff7 0%, #e8e0ef 100%);
        }

        /* ===== 基础样式 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
            background: linear-gradient(145deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
            color: var(--text);
            transition: background .5s ease, color .3s;
            min-height: 100vh;
            line-height: 1.6;
            overflow-x: hidden;
            background-attachment: fixed;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 3px;
        }

        /* ===== 背景光晕 ===== */
        .bg-glow-container {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
            contain: strict;
        }

        .bg-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(48px);
            opacity: 0.4;
            transition: opacity 2s ease;
            will-change: transform;
        }

        .bg-glow.g1 {
            width: 600px;
            height: 600px;
            background: var(--glow-color);
            top: -200px;
            left: -150px;
            animation: floatGlow1 20s ease-in-out infinite alternate;
            animation-play-state: var(--glow-play-state, running);
        }

        .bg-glow.g2 {
            width: 500px;
            height: 500px;
            background: var(--glow-color2);
            bottom: -150px;
            right: -100px;
            animation: floatGlow2 25s ease-in-out infinite alternate;
            animation-play-state: var(--glow-play-state, running);
        }

        .bg-glow.g3 {
            width: 400px;
            height: 400px;
            background: var(--glow-color);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: floatGlow3 30s ease-in-out infinite alternate;
            animation-play-state: var(--glow-play-state, running);
            opacity: 0.2;
        }

        @keyframes floatGlow1 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            100% {
                transform: translate(150px, 100px) scale(1.3);
            }
        }

        @keyframes floatGlow2 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            100% {
                transform: translate(-100px, -80px) scale(1.4);
            }
        }

        @keyframes floatGlow3 {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }

            100% {
                transform: translate(-40%, -60%) scale(1.6);
            }
        }

        /* ===== 返回顶部 ===== */
        #backToTop {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(155, 138, 189, 0.70);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.20);
            box-shadow: 0 4px 24px rgba(155, 138, 189, 0.30);
            font-size: 1.6rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 100;
            opacity: 0;
            transform: translateY(20px) scale(0.8);
            pointer-events: none;
            line-height: 1;
        }

        #backToTop.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        #backToTop:hover {
            transform: translateY(-4px) scale(1.08);
            background: rgba(155, 138, 189, 0.85);
            box-shadow: 0 6px 32px rgba(155, 138, 189, 0.45);
        }

        #backToTop .arrow {
            display: inline-block;
            transition: transform 0.3s ease;
        }

        #backToTop:hover .arrow {
            transform: translateY(-3px);
        }

        [data-theme="dark"] #backToTop {
            background: rgba(184, 162, 214, 0.70);
            box-shadow: 0 4px 24px rgba(184, 162, 214, 0.25);
        }

        [data-theme="dark"] #backToTop:hover {
            background: rgba(184, 162, 214, 0.85);
            box-shadow: 0 6px 32px rgba(184, 162, 214, 0.40);
        }

        @media (max-width:768px) {
            #backToTop {
                bottom: 20px;
                right: 20px;
                width: 42px;
                height: 42px;
                font-size: 1.3rem;
            }
        }

        @media (max-width:480px) {
            #backToTop {
                bottom: 16px;
                right: 16px;
                width: 38px;
                height: 38px;
                font-size: 1.1rem;
            }
        }

        /* ===== 公告栏 ===== */
        .announcement-bar {
            background: var(--announcement-bg);
            border-bottom: 1.5px solid var(--announcement-border);
            padding: 10px 20px 10px 28px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            transition: all 0.4s ease;
            position: relative;
            z-index: 9;
        }

        .announcement-bar.hidden {
            display: none;
        }

        .announcement-bar .announcement-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding-right: 8px;
        }

        .announcement-bar .announcement-item {
            display: flex;
            align-items: baseline;
            gap: 10px;
            font-size: 0.85rem;
            color: var(--announcement-text);
            line-height: 1.5;
        }

        .announcement-bar .announcement-item .announcement-icon {
            flex-shrink: 0;
            font-size: 1rem;
            opacity: 0.9;
            width: 20px;
            text-align: center;
        }

        .announcement-bar .announcement-item .announcement-text strong {
            color: var(--accent);
            font-weight: 600;
        }

        .announcement-bar .announcement-close {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text3);
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
            margin-top: 2px;
            line-height: 1;
            padding: 0;
        }

        .announcement-bar .announcement-close:hover {
            background: var(--border);
            color: var(--text);
            transform: rotate(90deg);
        }

        .announcement-install-btn {
            display: inline-block;
            padding: 2px 10px;
            margin-left: 6px;
            border-radius: 12px;
            border: 1.5px solid var(--accent);
            background: var(--accent);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            vertical-align: middle;
            font-family: inherit;
            line-height: 1.5;
        }

        .announcement-install-btn:hover {
            background: var(--accent2);
            border-color: var(--accent2);
            transform: translateY(-1px);
        }

        .announcement-install-btn:active {
            transform: scale(0.96);
        }

        #announcementToggle {
            text-align: center;
            padding: 8px;
            cursor: pointer;
            color: var(--accent);
            font-size: 0.85rem;
            border-bottom: 1.5px solid var(--border);
            background: var(--announcement-bg);
            transition: background 0.2s;
            user-select: none;
        }

        #announcementToggle:hover {
            background: var(--border);
        }

        @media (max-width:768px) {
            .announcement-bar {
                padding: 8px 12px 8px 16px;
                gap: 10px;
            }

            .announcement-bar .announcement-item {
                font-size: 0.78rem;
                gap: 6px;
            }

            .announcement-bar .announcement-close {
                width: 26px;
                height: 26px;
                font-size: 0.95rem;
            }
        }

        /* ===== 投稿按钮 ===== */
        .submit-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            color: var(--accent);
            font-weight: 600;
            text-decoration: none;
            padding: 4px 10px;
            border-radius: 14px;
            border: 1.5px solid var(--accent);
            background: rgba(255, 255, 255, 0.08);
            transition: all 0.25s ease;
            white-space: nowrap;
            cursor: pointer;
            letter-spacing: 0.02em;
        }

        .submit-link:hover {
            background: var(--accent);
            color: #fff;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 4px 16px rgba(155, 138, 189, 0.30);
        }

        @media (max-width:768px) {
            .submit-link {
                font-size: 0.65rem;
                padding: 3px 8px;
                border-radius: 12px;
            }
        }

        /* ===== 筛选栏 ===== */
        .filter-sticky {
            background: var(--filter-bg);
            border-bottom: 1px solid var(--border);
            padding: 14px 20px 10px;
            box-shadow: var(--shadow);
            transition: background .3s, border-color .3s;
            position: relative;
            z-index: 10;
        }

        .filter-header {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 48px;
            position: relative;
        }

        .site-logo {
            font-size: 1.3rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            background: var(--logo-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1.2;
            cursor: default;
            user-select: none;
            margin-right: 8px;
        }

        /* ===== 顶部导航栏 ===== */
        .top-nav {
            display: flex;
            align-items: center;
            gap: 2px;
            flex: 1;
        }

        .top-nav-item {
            background: none;
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text2);
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            font-family: inherit;
            position: relative;
        }

        .top-nav-item:hover {
            color: var(--text);
            background: var(--card-hover);
        }

        .top-nav-item.active {
            color: var(--accent);
            font-weight: 600;
        }

        .top-nav-item.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background: var(--accent);
            border-radius: 1px;
        }

        a.top-nav-item {
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .header-action-link {
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--accent);
            border: 1px solid var(--accent);
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .header-action-link:hover {
            background: var(--accent);
            color: #fff;
        }

        .header-right {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            position: relative;
            margin-left: 12px;
        }

        .nav-user-item {
            position: relative;
        }

        .top-nav-user-btn {
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text2);
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .top-nav-user-btn:hover {
            color: var(--text);
            background: var(--card-hover);
        }

        .nav-user-icon {
            font-size: 0.9rem;
        }

        /* ===== 网站标题区域 ===== */
        .site-title-section {
            text-align: center;
            padding: 10px 0 6px;
        }

        .site-title-section .site-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent);
            letter-spacing: .02em;
            white-space: nowrap;
            line-height: 1.3;
            cursor: default;
        }

        .site-title-section .site-subtitle {
            font-size: .82rem;
            color: var(--text2);
            margin-top: 2px;
            font-style: italic;
            white-space: nowrap;
        }

        .nav-user-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 200px;
            background: var(--modal-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: all 0.25s ease;
            z-index: 9999;
            overflow: hidden;
        }

        .nav-user-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .nav-user-dropdown-inner {
            padding: 6px;
        }

        .nav-user-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 0.88rem;
            color: var(--text);
            cursor: pointer;
            transition: background 0.2s;
            text-decoration: none;
        }

        .nav-user-dropdown-item:hover {
            background: var(--accent-light);
        }

        .nav-user-dropdown-item.danger {
            color: var(--danger);
        }

        .nav-user-dropdown-item .item-icon {
            font-size: 1rem;
            width: 20px;
            text-align: center;
        }

        .nav-user-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 8px;
        }

        .nav-user-dropdown-header {
            padding: 12px 14px 8px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 4px;
        }

        .nav-user-dropdown-username {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text);
        }

        .nav-user-dropdown-customid {
            font-size: 0.8rem;
            color: var(--accent);
            margin-top: 2px;
            font-weight: 500;
        }

        .nav-user-dropdown-email {
            font-size: 0.78rem;
            color: var(--text3);
            margin-top: 2px;
        }

        .notif-bell-wrap {
            position: relative;
        }

        .notif-bell-btn {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 4px;
            border-radius: 50%;
            transition: all 0.2s;
            line-height: 1;
        }

        .notif-bell-btn:hover {
            background: var(--card-hover);
            transform: scale(1.1);
        }

        .notif-badge {
            position: absolute;
            top: -2px;
            right: -4px;
            background: #ef4444;
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 8px;
            padding: 0 4px;
            pointer-events: none;
        }

        .notif-panel {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: calc(100vw - 24px);
            max-width: 340px;
            max-height: 420px;
            background: #faf7fd;
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
            z-index: 99990;
            overflow: hidden;
        }

        [data-theme="dark"] .notif-panel {
            background: #2a2330;
        }

        .notif-panel.show {
            display: block;
        }

        .notif-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 10px;
            border-bottom: 1px solid var(--border);
        }

        .notif-panel-title {
            font-weight: 700;
            font-size: 0.92rem;
            color: var(--text);
        }

        .notif-mark-all {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 0.78rem;
            cursor: pointer;
            font-weight: 500;
        }

        .notif-mark-all:hover {
            text-decoration: underline;
        }

        .notif-list {
            max-height: 370px;
            overflow-y: auto;
        }

        .notif-item {
            display: flex;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
            align-items: flex-start;
        }

        .notif-item:hover {
            background: var(--card-hover);
        }

        .notif-item.unread {
            background: rgba(155, 138, 189, 0.06);
        }

        .notif-item-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            background: var(--tag-bg);
        }

        .notif-item-avatar-placeholder {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--tag-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .notif-item-body {
            flex: 1;
            min-width: 0;
        }

        .notif-item-text {
            font-size: 0.82rem;
            color: var(--text);
            line-height: 1.4;
        }

        .notif-item-text strong {
            color: var(--accent);
            font-weight: 600;
        }

        .notif-item-preview {
            font-size: 0.75rem;
            color: var(--text3);
            margin-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .notif-item-time {
            font-size: 0.7rem;
            color: var(--text3);
            margin-top: 3px;
        }

        .notif-empty {
            text-align: center;
            padding: 30px 16px;
            color: var(--text3);
            font-size: 0.85rem;
        }

        .view-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 10px;
            justify-content: center;
        }

        .view-tab {
            padding: 8px 22px;
            font-size: .88rem;
            font-weight: 600;
            cursor: pointer;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text2);
            transition: all .2s;
            user-select: none;
        }

        .view-tab:first-child {
            border-radius: 20px 0 0 20px;
            border-right: none;
        }

        .view-tab:last-child {
            border-radius: 0 20px 20px 0;
        }

        .view-tab:nth-child(2) {
            border-right: none;
        }

        .view-tab.active {
            background: var(--view-tab-active);
            color: var(--view-tab-text);
            border-color: var(--view-tab-active);
            z-index: 2;
        }

        .view-tab:hover:not(.active) {
            border-color: var(--accent);
            color: var(--accent);
        }

        .search-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 auto 12px;
            max-width: 600px;
            width: 100%;
            padding: 0 4px;
        }

        .search-row .search-input-wrap {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 24px;
            transition: border-color .25s, box-shadow .25s;
            padding: 0 14px;
        }

        .search-row .search-input-wrap:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(155, 138, 189, 0.12);
        }

        .search-row .search-input-wrap .search-icon {
            font-size: 1.05rem;
            color: var(--text3);
            margin-right: 8px;
            user-select: none;
            flex-shrink: 0;
        }

        .search-row .search-input-wrap input {
            flex: 1;
            padding: 10px 4px 10px 0;
            border: none;
            background: transparent;
            color: var(--text);
            font-size: .88rem;
            font-family: inherit;
            outline: none;
            min-width: 0;
        }

        .search-row .search-input-wrap input::placeholder {
            color: var(--text3);
            opacity: 0.7;
        }

        .search-row .search-clear-btn {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: var(--text3);
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s, color .2s;
            padding: 0;
            line-height: 1;
            visibility: hidden;
            opacity: 0;
        }

        .search-row .search-clear-btn.visible {
            visibility: visible;
            opacity: 1;
        }

        .search-row .search-clear-btn:hover {
            background: var(--border);
            color: var(--text);
        }

        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            justify-content: center;
        }

        .filter-cat-btn {
            padding: 7px 15px;
            border-radius: 20px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text2);
            cursor: pointer;
            font-size: .85rem;
            transition: all .2s;
            white-space: nowrap;
            user-select: none;
            font-weight: 500;
        }

        .filter-cat-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(155, 138, 189, 0.12);
        }

        .filter-cat-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            font-weight: 600;
        }

        .filter-cat-btn.active.has-selection {
            color: #fff;
        }

        .filter-cat-btn.has-selection {
            border-color: var(--accent);
            color: var(--accent);
            box-shadow: 0 0 0 2px rgba(155, 138, 189, 0.15);
        }

        .filter-options-panel {
            display: none;
            max-height: 220px;
            overflow-y: auto;
            padding: 10px 16px;
            margin-top: 8px;
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            flex-wrap: wrap;
            gap: 6px;
            box-shadow: var(--shadow);
            justify-content: center;
        }

        .filter-options-panel.show {
            display: flex;
        }

        .filter-option-tag {
            padding: 5px 12px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--glass-bg-light);
            color: var(--tag-text);
            cursor: pointer;
            font-size: .78rem;
            transition: all .18s;
            white-space: nowrap;
            user-select: none;
        }

        .filter-option-tag:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(155, 138, 189, 0.15);
        }

        .filter-option-tag.selected {
            background: var(--tag-active-bg);
            color: var(--tag-active-text);
            border-color: var(--tag-active-bg);
            font-weight: 600;
        }

        .active-filters-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 8px;
            align-items: center;
            min-height: 22px;
            justify-content: center;
        }

        /* ===== 主界面屏蔽提示条（极简浅色风格） ===== */
        .adult-content-banner {
            display: none;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin: 8px auto 0;
            max-width: 960px;
            position: relative;
        }
        .adult-content-banner.show { display: flex; }

        .adult-content-chip {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 12px;
            border-radius: 14px;
            background: var(--glass-bg-light);
            border: 1px solid var(--border);
            color: var(--text2);
            font-size: 0.7rem;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
        }
        .adult-content-chip:hover,
        .adult-content-chip.pressing {
            background: var(--accent-light);
            border-color: rgba(155, 138, 189, 0.35);
            color: var(--accent2);
        }
        .adult-content-chip .chip-icon {
            font-size: 0.78rem;
            line-height: 1;
        }

        /* 用户排除的其他标签 chip（多个时放在右侧） */
        .excluded-tag-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            background: var(--glass-bg-light);
            border: 1px dashed var(--border);
            color: var(--text3);
            font-size: 0.68rem;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
        }
        .excluded-tag-chip:hover {
            background: var(--danger-light);
            border-color: rgba(192, 57, 43, 0.25);
            color: var(--danger);
            border-style: solid;
        }
        .excluded-tag-chip .x-remove {
            opacity: 0.55;
            font-weight: 700;
            line-height: 1;
            transition: opacity 0.2s;
        }
        .excluded-tag-chip:hover .x-remove { opacity: 1; }

        .excluded-tag-more {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 9px;
            border-radius: 12px;
            background: var(--glass-bg-light);
            border: 1px solid var(--border);
            color: var(--text3);
            font-size: 0.68rem;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
        }
        .excluded-tag-more:hover {
            background: var(--accent-light);
            color: var(--accent2);
            border-color: rgba(155, 138, 189, 0.35);
        }

        /* 悬停/长按弹出的气泡提示 */
        .adult-content-tooltip {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            padding: 8px 14px;
            border-radius: 10px;
            background: var(--card-bg-glass, var(--surface));
            backdrop-filter: blur(10px) saturate(1.3);
            -webkit-backdrop-filter: blur(10px) saturate(1.3);
            border: 1px solid var(--border);
            box-shadow: var(--glass-shadow);
            color: var(--text);
            font-size: 0.72rem;
            line-height: 1.55;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
            max-width: 92vw;
            text-align: center;
            z-index: 500;
        }
        .adult-content-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--border);
        }
        .adult-content-chip:hover + .adult-content-tooltip,
        .adult-content-tooltip.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .adult-content-tooltip b { font-weight: 600; color: var(--accent2); }

        .active-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            background: var(--accent);
            color: #fff;
            font-size: .75rem;
            font-weight: 500;
        }

        .active-filter-chip .remove-chip {
            cursor: pointer;
            font-weight: 700;
            margin-left: 2px;
            opacity: .8;
            font-size: .85rem;
        }

        .active-filter-chip .remove-chip:hover {
            opacity: 1;
        }

        .clear-all-filters {
            font-size: .75rem;
            color: var(--danger);
            cursor: pointer;
            margin-left: 6px;
            font-weight: 500;
            text-decoration: underline;
            white-space: nowrap;
        }

        .clear-all-filters:hover {
            opacity: .8;
        }

        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 12px 20px;
            align-items: center;
            justify-content: space-between;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .toolbar-left {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: 1.5px solid var(--border);
            cursor: pointer;
            font-size: .82rem;
            font-weight: 500;
            transition: all .2s;
            background: var(--surface);
            color: var(--text);
            white-space: nowrap;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

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

        .btn-accent {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .btn-accent:hover {
            background: var(--accent2);
            border-color: var(--accent2);
            color: #fff;
        }

        /* .btn 内的 inline SVG 图标尺寸控制 */
        .btn .icon {
            display: inline-flex;
            align-items: center;
            font-size: .9rem;
            line-height: 1;
            vertical-align: middle;
        }

        .btn .icon svg {
            display: block;
            width: 1em;
            height: 1em;
        }

        .btn-secondary {
            background: var(--surface2);
            color: var(--text);
            border: 1px solid var(--border);
        }

        .btn-secondary:hover {
            background: var(--border);
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: .72rem;
            border-radius: 14px;
        }

        .btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .btn-random {
            background: linear-gradient(135deg, #f5b342, #f5a623);
            color: #fff;
            border-color: #f5b342;
            font-weight: 600;
            box-shadow: 0 2px 12px rgba(245, 179, 66, 0.20);
            transition: all 0.3s ease;
        }

        .btn-random:hover {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 4px 24px rgba(245, 179, 66, 0.35);
            border-color: #f5a623;
            color: #fff;
        }

        .btn-random .dice-icon {
            display: inline-block;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-random:active .dice-icon {
            transform: rotate(360deg) scale(1.2);
        }

        .btn-wishlist {
            border-color: #e74c3c;
            color: #e74c3c;
        }

        .btn-wishlist:hover {
            background: #e74c3c;
            color: #fff;
            border-color: #e74c3c;
        }

        .btn-wishlist.active {
            background: #e74c3c;
            color: #fff;
            border-color: #e74c3c;
        }

        .btn-wishlist .heart-icon {
            display: inline-flex;
            align-items: center;
            font-size: .9rem;
            line-height: 1;
            transition: transform 0.3s ease;
        }

        .btn-wishlist .heart-icon svg {
            display: block;
            width: 1em;
            height: 1em;
        }

        .btn-wishlist:hover .heart-icon {
            transform: scale(1.2);
        }

        .btn-exclude-played {
            border-color: var(--success);
            color: var(--success);
        }

        .btn-exclude-played:hover {
            background: var(--success);
            color: #fff;
            border-color: var(--success);
        }

        .btn-exclude-played.active {
            background: var(--success);
            color: #fff;
            border-color: var(--success);
        }

        .btn-exclude-played .check-icon {
            display: inline-flex;
            align-items: center;
            font-size: .9rem;
            line-height: 1;
            transition: transform 0.3s ease;
        }

        .btn-exclude-played .check-icon svg {
            display: block;
            width: 1em;
            height: 1em;
        }

        .btn-exclude-played:hover .check-icon {
            transform: scale(1.2);
        }

        .btn-achievement {
            border-color: var(--gold);
            color: var(--gold);
            font-weight: 600;
        }

        .btn-achievement:hover {
            background: var(--gold);
            color: #fff;
            border-color: var(--gold);
        }

        .btn-achievement .trophy-icon {
            display: inline-block;
            transition: transform 0.3s ease;
        }

        .btn-achievement:hover .trophy-icon {
            transform: scale(1.15) rotate(-8deg);
        }

        .btn-achievement .badge-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gold);
            margin-left: 4px;
            animation: pulse-dot 1.5s ease-in-out infinite;
        }

        @keyframes pulse-dot {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.4);
                opacity: 0.5;
            }
        }

        .sort-btn-group {
            display: flex;
            gap: 0;
            border-radius: 14px;
            overflow: hidden;
            border: 1.5px solid var(--border);
        }

        .sort-btn {
            padding: 5px 12px;
            font-size: .72rem;
            font-weight: 500;
            cursor: pointer;
            border: none;
            background: var(--surface);
            color: var(--text2);
            transition: all .2s;
            white-space: nowrap;
        }

        .sort-btn:hover {
            background: var(--card-hover);
            color: var(--accent);
        }

        .sort-btn.active {
            background: var(--sort-active-bg);
            color: var(--sort-active-text);
            font-weight: 600;
        }

        .sort-btn:not(:last-child) {
            border-right: 1.5px solid var(--border);
        }

        /* —— 方案A：原生下拉 select 样式，替换旧分段按钮 —— */
        .sort-select-wrapper {
            display: inline-flex;
            align-items: center;
            position: relative;
            border-radius: 14px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            padding: 0;
            min-width: 140px;
            transition: border-color .2s, box-shadow .2s;
            cursor: pointer;
            vertical-align: middle;
        }
        .sort-select-wrapper:hover {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }
        .sort-select-wrapper:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }
        .sort-select-prefix {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            font-size: .82rem;
            color: var(--accent);
            pointer-events: none;
            flex-shrink: 0;
        }
        .sort-select-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            font-size: .75rem;
            color: var(--text3);
            pointer-events: none;
            flex-shrink: 0;
        }
        .sort-select {
            flex: 1 1 auto;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: transparent;
            border: none;
            outline: none;
            padding: 5px 2px 5px 6px;
            font-size: .72rem;
            font-weight: 500;
            color: var(--text1);
            cursor: pointer;
            font-family: inherit;
            line-height: 1.3;
            min-width: 0;
        }
        .sort-select::-ms-expand {
            display: none;
        }
        .sort-select option {
            background: var(--surface);
            color: var(--text1);
            font-size: .75rem;
            padding: 4px 8px;
        }

        .theme-toggle {
            cursor: pointer;
            font-size: 1.3rem;
            padding: 6px 10px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--surface);
            transition: all .2s;
            line-height: 1;
        }

        .theme-toggle:hover {
            border-color: var(--accent);
            background: var(--card-hover);
            transform: rotate(30deg);
        }

        .theme-toggle-floating {
            position: fixed;
            bottom: 90px;
            right: 24px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--surface);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all .25s ease;
            z-index: 999;
            padding: 0;
            font-family: inherit;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .theme-toggle-floating:hover {
            border-color: var(--accent);
            background: var(--card-hover);
            transform: rotate(30deg) scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }

        .theme-toggle-floating:active {
            transform: scale(0.95);
        }

        .theme-toggle-icon {
            font-size: 1.3rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .watermark {
            font-size: 0.75rem;
            color: var(--text3);
            margin-right: 6px;
            font-weight: 500;
            opacity: 0.85;
            white-space: nowrap;
            letter-spacing: 0.02em;
        }

        .result-count {
            font-size: .82rem;
            color: var(--text3);
            font-weight: 500;
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
        }

        .result-count .count-number {
            display: inline-block;
            min-width: 1.2em;
            text-align: center;
            font-weight: 700;
            color: var(--text);
            transition: transform 0.15s ease;
        }

        .result-count .count-number.pop {
            animation: countPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes countPop {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.4);
                color: var(--accent);
            }

            100% {
                transform: scale(1);
            }
        }

        .coin-tip-btn {
            cursor: pointer;
            font-size: 1.4rem;
            padding: 6px 8px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--surface);
            transition: all .25s;
            line-height: 1;
            color: var(--coin-color);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            user-select: none;
        }

        .coin-tip-btn:hover {
            border-color: var(--coin-color);
            background: rgba(245, 179, 66, 0.10);
            transform: scale(1.08) rotate(-8deg);
            box-shadow: 0 0 16px rgba(245, 179, 66, 0.20);
        }

        .sync-status {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.65rem;
            color: var(--text3);
            padding: 2px 8px;
            border-radius: 8px;
            background: var(--sync-status-bg);
            white-space: nowrap;
        }

        .sync-status.synced {
            color: var(--success);
        }

        .sync-status.syncing {
            color: var(--accent);
            animation: pulse 1s ease-in-out infinite;
        }

        .sync-status.error {
            color: var(--danger);
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        /* ===== 游戏卡片 ===== */
        .gallery-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 16px 20px 40px;
            position: relative;
            z-index: 2;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
        }

        /* ===== 系列作品视图 ===== */
        .series-view-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
        }
        .series-view-empty .empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
        .series-group {
            margin-bottom: 32px;
            grid-column: 1 / -1;
        }
        .series-group-cards {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .series-group-cards .gallery-card {
            flex: 0 0 220px;
            min-width: 0;
        }
        .series-group-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
        }
        .series-group-title::before {
            content: '';
            width: 4px;
            height: 20px;
            border-radius: 2px;
            background: linear-gradient(135deg, #b8a2d6 0%, #9b8abd 100%);
            flex-shrink: 0;
        }
        .series-group-badge {
            font-size: 12px;
            background: var(--accent-light);
            color: var(--accent);
            padding: 2px 10px;
            border-radius: 10px;
            font-weight: 600;
        }

        /* 详情页系列区块 */
        .detail-series-section {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 20px;
            grid-column: 1 / -1;
            /* 系列作品多时，不允许这个 section 撑大整页宽度 */
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .detail-series-section h3 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .detail-series-section h3::before {
            content: '';
            width: 4px;
            height: 18px;
            border-radius: 2px;
            background: linear-gradient(135deg, #b8a2d6 0%, #9b8abd 100%);
        }
        .detail-series-list {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            /* 给滚动条留出明显空间，方便 PC 端用户拖拽 */
            padding-bottom: 10px;
            /* 系列作品横向滚动时，禁止子内容撑宽父容器（否则会把详情页整体撑宽超过手机屏幕） */
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            /* Firefox 自定义滚动条 */
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--border);
        }
        /* PC 端：让横向滚动条更粗壮、更显眼，方便点击拖拽 */
        .detail-series-list::-webkit-scrollbar {
            height: 10px;
        }
        .detail-series-list::-webkit-scrollbar-track {
            background: var(--glass-bg-light);
            border-radius: 6px;
            margin: 0 4px;
        }
        .detail-series-list::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, #9b8abd 0%, #b8a2d6 100%);
            border-radius: 6px;
            border: 2px solid var(--glass-bg-light);
            transition: background 0.2s;
            min-width: 40px;
        }
        .detail-series-list::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(90deg, #7d6aa5 0%, #9b8abd 100%);
        }
        .detail-series-list::-webkit-scrollbar-thumb:active {
            background: var(--accent);
        }
        .detail-series-item {
            flex-shrink: 0;
            width: 220px;
            cursor: pointer;
            transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
            border-radius: 20px;
            overflow: hidden;
            background: var(--card-bg-glass);
            border: 1px solid var(--card-border-glass);
            box-shadow: var(--glass-shadow);
        }
        .detail-series-item:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.18); border-color: var(--accent); }
        .detail-series-item.current {
            opacity: 0.5;
            pointer-events: none;
        }
        .detail-series-item-cover {
            width: 100%;
            aspect-ratio: 460/215;
            overflow: hidden;
            background: var(--tag-bg);
            position: relative;
        }
        .detail-series-item.current .detail-series-item-cover {
            border-color: var(--accent);
        }
        .detail-series-item-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        .detail-series-item-cover img.loaded {
            opacity: 1;
        }
        .detail-series-item-cover .card-cover-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--text3);
            background: var(--tag-bg);
            z-index: 1;
        }
        .detail-series-item-body {
            padding: 10px 14px 8px;
        }
        .detail-series-item-title {
            font-weight: 700;
            font-size: .95rem;
            color: var(--text);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .detail-series-item-date {
            font-size: .68rem;
            color: var(--text3);
            margin-top: 4px;
        }

        .gallery-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            background: var(--card-bg-glass);
            border: 1px solid var(--card-border-glass);
            box-shadow: var(--glass-shadow);
            opacity: 0;
            transform: translateY(40px) scale(0.96);
            transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease, border-color 0.4s ease, background 0.4s ease;
            content-visibility: auto;
            contain-intrinsic-size: auto 320px;
            display: flex;
            flex-direction: column;
        }

        [data-theme="dark"] .gallery-card {
            background: rgba(42, 35, 48, 0.82);
        }

        .gallery-card.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        @media (hover: hover) {
            .gallery-card:hover {
                transform: translateY(-8px) scale(1.015);
                box-shadow: var(--shadow-lg);
                border-color: rgba(155, 138, 189, 0.30);
                background: rgba(255, 255, 255, 0.08);
            }

            [data-theme="dark"] .gallery-card:hover {
                background: rgba(255, 255, 255, 0.05);
                border-color: rgba(184, 162, 214, 0.25);
            }
        }

        .gallery-card.highlight {
            animation: highlightPulse 1.2s ease 3;
            border-color: var(--accent);
            box-shadow: 0 0 60px rgba(155, 138, 189, 0.35);
            transform: scale(1.02);
            z-index: 5;
        }

        [data-theme="dark"] .gallery-card.highlight {
            box-shadow: 0 0 60px rgba(155, 138, 189, 0.20);
        }

        @keyframes highlightPulse {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(155, 138, 189, 0.15);
                transform: scale(1.02);
            }

            50% {
                box-shadow: 0 0 60px rgba(155, 138, 189, 0.40);
                transform: scale(1.06);
            }
        }

        .card-heroine-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 5;
            background: linear-gradient(135deg, #6b5a8a, #4a3a66);
            color: #fff;
            padding: 2px 12px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            border: 1px solid rgba(255, 255, 255, 0.20);
            box-shadow: 0 2px 14px rgba(60, 40, 80, 0.45);
            pointer-events: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
            text-transform: uppercase;
        }

        [data-theme="dark"] .card-heroine-tag {
            background: linear-gradient(135deg, #8a77a8, #6a5a82);
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.50);
            border-color: rgba(255, 255, 255, 0.12);
        }

        .gallery-card .card-cover-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 460/215;
            overflow: hidden;
            background: var(--tag-bg);
            flex-shrink: 0;
            z-index: 3;
        }

        .gallery-card .card-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: 0;
            transition: opacity 0.6s ease;
            position: relative;
            z-index: 2;
        }

        .gallery-card .card-cover.loaded {
            opacity: 1;
        }

        .gallery-card .card-cover-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text3);
            font-size: 2.5rem;
            background: var(--tag-bg);
            z-index: 1;
            transition: opacity 0.5s ease;
        }

        .gallery-card .card-cover-placeholder.hidden {
            opacity: 0;
        }

        /* 占位 SVG 图标尺寸控制 */
        .gallery-card .card-cover-placeholder svg,
        .detail-series-item-cover .card-cover-placeholder svg,
        .played-grid-item .item-cover-placeholder svg,
        .game-cover-placeholder svg {
            display: block;
            width: 1em;
            height: 1em;
        }

        .gallery-card .card-body {
            padding: 10px 14px 8px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            position: relative;
            z-index: 3;
        }

        .gallery-card .card-title {
            font-weight: 700;
            font-size: .95rem;
            color: var(--text);
            line-height: 1.3;
        }

        .gallery-card .card-desc {
            font-size: .75rem;
            color: var(--text2);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }

        .gallery-card .card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }

        .gallery-card .card-meta span {
            font-size: .68rem;
            padding: 2px 7px;
            border-radius: 10px;
            background: var(--glass-bg-light);
            color: var(--tag-text);
            white-space: nowrap;
        }

        .gallery-card .card-meta span.accent-tag {
            background: var(--accent);
            color: #fff;
            font-weight: 500;
        }

        .gallery-card .card-meta span.tag-muted {
            background: var(--text3);
            color: #fff;
            font-weight: 500;
        }

        .gallery-card .card-user-actions {
            display: flex;
            gap: 6px;
            padding: 4px 14px 8px;
            flex-wrap: wrap;
            align-items: center;
            position: relative;
            z-index: 3;
            border-top: 1px solid var(--border);
            margin-top: auto;
            flex-shrink: 0;
        }

        /* ★ 系列作品板块：功能按钮强制同一行水平排列，不上下堆叠 */
        .series-group-cards .gallery-card .card-user-actions {
            flex-wrap: nowrap;
            padding: 4px 10px 8px;
            gap: 6px;
        }
        .series-group-cards .gallery-card .card-user-actions .action-btn {
            flex: 1 1 0;
            min-width: 0;
            justify-content: center;
            padding: 4px 6px;
            font-size: .65rem;
        }
        .series-group-cards .gallery-card .card-user-actions .action-btn .action-label {
            white-space: nowrap;
        }

        /* ★ 未发售游戏（仅一个愿望单按钮）：按钮靠右对齐，符合用户使用习惯 */
        .gallery-card .card-user-actions.only-wish {
            justify-content: flex-end;
        }
        .gallery-card .card-user-actions.only-wish .action-btn {
            flex: 0 0 auto;
        }

        .gallery-card .card-user-actions .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: .7rem;
            padding: 4px 10px;
            border-radius: 12px;
            border: 1.5px solid var(--border);
            cursor: pointer;
            background: var(--surface);
            color: var(--text2);
            transition: all .2s;
            user-select: none;
            font-weight: 500;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .gallery-card .card-user-actions .action-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .gallery-card .card-user-actions .action-btn.active-wish {
            background: #e74c3c;
            color: #fff;
            border-color: #e74c3c;
        }

        .gallery-card .card-user-actions .action-btn.active-played {
            background: var(--success);
            color: #fff;
            border-color: var(--success);
        }

        .gallery-card .card-user-actions .action-btn .icon {
            font-size: .85rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
        }

        .gallery-card .card-user-actions .action-btn .icon svg {
            display: block;
            width: 1em;
            height: 1em;
        }

        .gallery-card .card-user-actions .action-btn .action-label {
            margin-left: 4px;
        }

        .gallery-card .card-admin-actions {
            display: flex;
            gap: 6px;
            padding: 0 14px 10px;
            flex-wrap: wrap;
            position: relative;
            z-index: 3;
        }

        .gallery-card .card-admin-actions button {
            font-size: .68rem;
            padding: 4px 10px;
            border-radius: 10px;
            border: 1px solid var(--border);
            cursor: pointer;
            background: var(--surface);
            color: var(--text2);
            transition: all .15s;
        }

        .gallery-card .card-admin-actions button:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .gallery-card .card-admin-actions button.btn-del:hover {
            border-color: var(--danger);
            color: var(--danger);
        }

        .gallery-card .card-rating-count {
            font-size: .68rem;
            padding: 2px 7px;
            border-radius: 10px;
            background: var(--glass-bg-light);
            color: var(--tag-text);
            white-space: nowrap;
            display: inline-block;
            min-height: 0;
        }

        .gallery-card .card-parallax-bg {
            display: none;
            position: absolute;
            inset: -20%;
            z-index: 0;
            pointer-events: none;
            border-radius: 30px;
            background: radial-gradient(ellipse at var(--parallax-x, 50%) var(--parallax-y, 50%),
                    rgba(155, 138, 189, 0.04) 0%, transparent 70%);
            transition: background 0.6s ease;
            opacity: 0.5;
        }

        @media (hover: hover) and (prefers-reduced-motion: no-preference) {
            .gallery-card .card-parallax-bg {
                display: block;
            }

            .gallery-card:hover .card-parallax-bg {
                opacity: 1;
            }

            [data-theme="dark"] .gallery-card .card-parallax-bg {
                background: radial-gradient(ellipse at var(--parallax-x, 50%) var(--parallax-y, 50%),
                        rgba(184, 162, 214, 0.04) 0%, transparent 70%);
            }
        }

        /* ================================================================
   ★★★ 详情页 — 全新排版 (桌面端两栏 / 移动端单栏) ★★★
   ================================================================ */

        /* 材质纹理：纸质+噪点+内阴影+光晕 */
        .texture-card {
            position: relative;
            background-color: rgba(248, 244, 252, 0.72);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(155, 138, 189, 0.035) 3px,
                    rgba(155, 138, 189, 0.035) 4px
                );
            border: 1px solid rgba(190, 180, 210, 0.5);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(60, 30, 80, 0.04),
                inset 2px 0 8px rgba(155, 138, 189, 0.04),
                inset -2px 0 8px rgba(155, 138, 189, 0.04),
                0 1px 3px rgba(60, 30, 80, 0.06),
                0 6px 20px rgba(60, 30, 80, 0.05);
            overflow: hidden;
        }

        .texture-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 35%),
                radial-gradient(ellipse at 10% 5%, rgba(255, 255, 255, 0.12) 0%, transparent 35%),
                radial-gradient(ellipse at 15% 10%, rgba(155, 138, 189, 0.08) 0%, transparent 50%);
            z-index: 0;
        }

        .texture-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
            z-index: 0;
        }

        .texture-card > * { position: relative; z-index: 1; }

        .detail-screenshots.texture-card::before,
        .detail-screenshots.texture-card::after {
            display: none;
        }

        .detail-screenshots.texture-card {
            background-image: none;
            box-shadow: none;
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: var(--bg);
            padding: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* 防止内部横向滚动容器（如系列作品列表）把整个 overlay 撑宽产生整页横向滚动 */
            max-width: 100vw;
            width: 100vw;
            overflow-x: hidden;
        }

        .modal-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        /* ---------- 编辑弹窗：居中窄弹窗 ---------- */
        @media (min-width: 769px) {
            #editModalOverlay {
                display: none;
                align-items: flex-start;
                justify-content: center;
                padding: 40px 20px;
                overflow-y: auto;
                background: var(--overlay);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
            #editModalOverlay.show {
                display: flex;
            }
            #editModalOverlay .modal {
                background: var(--surface2);
                border-radius: 16px;
                border: 1px solid var(--border);
                max-width: 680px;
                width: 100%;
                max-height: calc(100vh - 80px);
                height: auto;
                min-height: unset;
                box-shadow: var(--shadow-lg);
                padding: 20px 24px 24px;
                overflow-y: auto;
                margin: 0 auto;
            }
            #editModalOverlay .modal .modal-close {
                display: flex !important;
                position: sticky;
                top: 0;
                float: right;
                font-size: 1.1rem;
                cursor: pointer;
                color: var(--text2);
                z-index: 10;
                background: var(--modal-bg);
                border-radius: 50%;
                width: 32px;
                height: 32px;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--border);
                transition: all .2s;
                margin-left: auto;
                margin-bottom: 8px;
            }
            #editModalOverlay .modal .modal-close:hover {
                color: var(--danger);
                border-color: var(--danger);
                transform: rotate(90deg);
            }
        }

        /* ---------- 导入缓冲区弹窗：居中窄弹窗（与编辑弹窗一致） ---------- */
        @media (min-width: 769px) {
            #bufferModalOverlay {
                display: none;
                align-items: flex-start;
                justify-content: center;
                padding: 40px 20px;
                overflow-y: auto;
                background: var(--overlay);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
            #bufferModalOverlay.show {
                display: flex;
            }
            #bufferModalOverlay .modal {
                background: var(--surface2);
                border-radius: 16px;
                border: 1px solid var(--border);
                max-width: 760px;
                width: 100%;
                max-height: calc(100vh - 80px);
                height: auto;
                min-height: unset;
                box-shadow: var(--shadow-lg);
                padding: 20px 24px 24px;
                overflow-y: auto;
                margin: 0 auto;
            }
            #bufferModalOverlay .modal .modal-close {
                display: flex !important;
                position: sticky;
                top: 0;
                float: right;
                font-size: 1.1rem;
                cursor: pointer;
                color: var(--text2);
                z-index: 10;
                background: var(--modal-bg);
                border-radius: 50%;
                width: 32px;
                height: 32px;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--border);
                transition: all .2s;
                margin-left: auto;
                margin-bottom: 8px;
            }
            #bufferModalOverlay .modal .modal-close:hover {
                color: var(--danger);
                border-color: var(--danger);
                transform: rotate(90deg);
            }
        }

        /* 编辑弹窗需叠在缓冲区弹窗之上（缓冲区中点「编辑」时） */
        #editModalOverlay { z-index: 1050; }

        /* ---------- 缓冲区列表项 ---------- */
        .buffer-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .buffer-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
        }
        .buffer-info {
            min-width: 0;
            flex: 1;
        }
        .buffer-title {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .buffer-meta {
            font-size: 0.78rem;
            color: var(--text3);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .buffer-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }
        @media (max-width: 768px) {
            .buffer-item {
                flex-direction: column;
                align-items: stretch;
            }
            .buffer-actions {
                justify-content: flex-end;
            }
        }

        /* ---------- 投稿弹窗：居中窄弹窗（与编辑弹窗一致） ---------- */
        @media (min-width: 769px) {
            #submitModalOverlay {
                display: none;
                align-items: flex-start;
                justify-content: center;
                padding: 40px 20px;
                overflow-y: auto;
                background: var(--overlay);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
            #submitModalOverlay.show {
                display: flex;
            }
            #submitModalOverlay .modal {
                background: var(--surface2);
                border-radius: 16px;
                border: 1px solid var(--border);
                max-width: 560px;
                width: 100%;
                max-height: calc(100vh - 80px);
                height: auto;
                min-height: unset;
                box-shadow: var(--shadow-lg);
                padding: 20px 24px 24px;
                overflow-y: auto;
                margin: 0 auto;
            }
            #submitModalOverlay .modal .modal-close {
                display: flex !important;
                position: sticky;
                top: 0;
                float: right;
                font-size: 1.1rem;
                cursor: pointer;
                color: var(--text2);
                z-index: 10;
                background: var(--modal-bg);
                border-radius: 50%;
                width: 32px;
                height: 32px;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--border);
                transition: all .2s;
                margin-left: auto;
                margin-bottom: 8px;
            }
            #submitModalOverlay .modal .modal-close:hover {
                color: var(--danger);
                border-color: var(--danger);
                transform: rotate(90deg);
            }
            .submit-draft-tag {
                font-size: 0.68rem;
                color: var(--warning, #e6a23c);
                border: 1px solid var(--warning, #e6a23c);
                border-radius: 6px;
                padding: 0 5px;
                margin-left: 6px;
                vertical-align: middle;
            }
            .submit-name-sub {
                font-size: 0.75rem;
                color: var(--text3);
                margin-left: 6px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 40%;
            }
        }

        /* ---------- 移动端适配：缓冲区 & 投稿弹窗 ---------- */
        @media (max-width: 768px) {
            /* 缓冲区列表操作按钮：允许换行、加大点击区 */
            .buffer-actions {
                flex-wrap: wrap;
                justify-content: flex-end;
            }
            .buffer-actions .btn-sm {
                flex: 1;
                padding: 10px 6px;
            }
            /* 投稿弹窗：游玩视角/服设分类上下堆叠，占满整行 */
            #submitModalOverlay .form-row .form-group {
                min-width: 100%;
            }
            /* 弹窗底部按钮：纵向堆叠、全宽，方便拇指点击 */
            #submitModalOverlay .modal .submit-footer,
            #bufferModalOverlay .modal .buffer-footer {
                flex-direction: column;
                align-items: stretch;
            }
            #submitModalOverlay .modal .submit-footer .btn,
            #bufferModalOverlay .modal .buffer-footer .btn {
                width: 100%;
                padding: 11px 12px;
            }
            #bufferModalOverlay .modal .buffer-footer .btn[style*="margin-left:auto"] {
                margin-left: 0;
            }
        }

        .modal {
            background: var(--bg);
            border-radius: 0;
            max-width: 100%;
            width: 100%;
            max-height: none;
            height: auto;
            min-height: 100vh;
            box-shadow: none;
            border: none;
            padding: 20px 24px 60px;
            transform: none;
            transition: none;
            position: relative;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            /* 防止详情页被内部横向滚动区（系列作品等）撑宽超出屏幕宽度 */
            box-sizing: border-box;
            max-width: 100vw;
            overflow-x: hidden;
        }

        /* ---------- 详情页 Grid 容器 ---------- */
        .detail-container {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
            grid-template-areas:
                "header header"
                "main main"
                "desc desc"
                "other screenshots"
                "reviews reviews";
            gap: 18px 28px;
            max-width: 1280px;
            margin: 0 auto;
            /* 强制不被内部横向滚动子元素撑宽 */
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        /* ---------- 顶部栏 ---------- */
        .detail-header {
            grid-area: header;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 6px 0 12px;
            border-bottom: 1.5px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--bg);
            z-index: 10;
        }

        .detail-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px 6px 12px;
            border-radius: 24px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            font-size: 0.88rem;
            font-weight: 500;
            transition: all 0.25s ease;
            font-family: inherit;
        }

        .detail-back-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateX(-3px);
        }

        .detail-back-btn .back-icon {
            font-size: 1.05rem;
            line-height: 1;
        }

        .detail-status-label {
            font-size: 0.85rem;
            color: var(--text3);
            background: var(--tag-bg);
            padding: 2px 12px;
            border-radius: 14px;
            border: 1px solid var(--border);
        }

        .detail-id {
            font-size: 0.78rem;
            color: var(--text3);
            margin-left: auto;
            opacity: 0.7;
        }

        .detail-share-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 14px;
            border-radius: 24px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text2);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.25s ease;
            font-family: inherit;
        }

        .detail-share-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: scale(1.02);
            box-shadow: 0 2px 12px rgba(155, 138, 189, 0.12);
        }

        /* ---------- 主区域：封面 + 基本信息 (两栏) ---------- */
        .detail-main {
            grid-area: main;
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 24px;
            align-items: start;
        }

        .detail-cover-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            background: var(--tag-bg);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
            border: 1px solid var(--border);
        }

        .detail-cover-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: var(--tag-bg);
        }

        .detail-info-wrapper {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 2px;
            justify-content: flex-start;
        }

        .detail-title {
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.2;
            margin-bottom: 2px;
        }

        .detail-title-en {
            font-size: 0.95rem;
            color: var(--text3);
            font-weight: 400;
            margin-top: -2px;
            margin-bottom: 8px;
        }

        .detail-tags-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 2px 0;
        }

        .detail-tags-row .detail-tag {
            font-size: 0.78rem;
            padding: 3px 12px;
            border-radius: 14px;
            background: var(--glass-bg-light);
            color: var(--tag-text);
            border: 1px solid var(--border);
            white-space: nowrap;
        }

        /* 元信息 + 操作按钮组合区块：PC端左右分布、移动端自动换行 */
        .detail-meta-block {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 8px 14px;
            margin: 2px 0 6px;
        }

        .detail-meta-block .detail-meta-row {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }

        .detail-meta-block .detail-actions {
            grid-area: unset;
            border: none;
            padding: 0;
            margin: 0;
            flex: 0 0 auto;
        }

        .detail-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            font-size: 0.88rem;
            color: var(--text2);
            margin: 2px 0;
        }

        .detail-meta-row span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* ★ 短简介：解除长度限制 */
        .detail-short-desc {
            font-size: 0.88rem;
            line-height: 1.5;
            color: var(--text2);
            display: block;
            margin-top: 2px;
            padding-top: 4px;
            border-top: 1px solid var(--border);
        }

        /* ---------- 详细简介 ---------- */
        .detail-description {
            grid-area: desc;
            border-radius: 14px;
            padding: 16px 20px;
            font-size: 0.92rem;
            line-height: 1.8;
            color: var(--text);
            white-space: pre-line;
            text-indent: 0;
        }

        /* ---------- 底部：其他信息 + 实机展示图 ---------- */
        .detail-other-info {
            grid-area: other;
            border-radius: 14px;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* ★ 左侧信息表格：加大字号和行距 */
        .detail-other-info .detail-info-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 1.15rem;
            line-height: 1.6;
        }

        .detail-other-info .detail-info-table td {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
        }

        .detail-other-info .detail-info-table td:first-child {
            font-weight: 600;
            color: var(--text2);
            width: 30%;
            white-space: nowrap;
        }

        .detail-other-info .detail-info-table td .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .detail-other-info .detail-info-table td .detail-tags span {
            font-size: 0.9rem;
            padding: 2px 10px;
            border-radius: 12px;
            background: var(--glass-bg-light);
            color: var(--tag-text);
        }

        /* ★ 链接按钮区：字号与表格一致，行距统一 */
        .detail-links {
            margin-top: 0;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .detail-links .detail-link-btn {
            display: inline-block;
            padding: 6px 18px;
            background: var(--accent);
            color: #fff;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            line-height: 1.6;
            transition: all 0.25s;
            border: none;
            cursor: pointer;
        }

        .detail-links .detail-link-btn:hover {
            background: var(--accent2);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(155, 138, 189, 0.25);
        }

        /* ---------- 截图区域：根据张数自适应 ---------- */
        .detail-screenshots {
            grid-area: screenshots;
            border-radius: 14px;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .detail-screenshots h3 {
            font-size: 0.95rem;
            color: var(--accent);
            margin-bottom: 10px;
            font-weight: 600;
            flex-shrink: 0;
        }

        .detail-screenshots-grid {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 0;
            justify-content: flex-start;
        }

        /* 普通截图（非 GIF/视频） */
        .detail-screenshots-grid img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            background: var(--tag-bg);
            flex-shrink: 0;
        }

        .detail-screenshots-grid.screenshots-2 img {
            max-height: none;
            object-fit: contain;
        }

        .detail-screenshots-grid img:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        /* ★★★ GIF 专用：强制覆盖通用规则 ★★★ */
        .detail-screenshots-grid .screenshot-wrap.gif-img img {
            max-height: none !important;
            object-fit: contain !important;
            width: auto !important;
            max-width: 100%;
            display: block;
            border-radius: 10px;
            border: 1px solid var(--border);
            cursor: pointer;
            background: var(--tag-bg);
        }

        /* 截图容器：弹性居中 */
        .detail-screenshots-grid .screenshot-wrap {
            position: relative;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        /* GIF 角标 */
        .detail-screenshots-grid .gif-badge {
            position: absolute;
            top: 6px;
            left: 6px;
            background: rgba(0, 0, 0, 0.65);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            letter-spacing: 0.5px;
            pointer-events: none;
            z-index: 2;
        }

        /* 视频样式 */
        .detail-screenshots-grid .screenshot-wrap.video-wrap video {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: #000;
            cursor: pointer;
        }

        .detail-screenshots-grid.screenshots-2 .screenshot-wrap.video-wrap video {
            max-height: none;
            object-fit: contain;
        }

        /* ---------- 评论区 ---------- */
        .review-section {
            grid-area: reviews;
            margin-top: 4px;
            padding-top: 14px;
            border-top: 2px solid var(--border);
        }

        .review-section .review-section-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 10px;
        }

        .review-section .review-user-area {
            background: var(--surface2);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 12px;
            border: 1px solid var(--border);
        }

        .review-section .review-community-area {
            margin-top: 14px;
        }

        .review-section .review-community-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 8px;
        }

        .review-section .review-stats {
            font-size: 0.9rem;
            color: var(--text2);
        }

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

        /* ---------- 操作按钮区域 ---------- */
        .detail-actions {
            grid-area: actions;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
            margin-top: 6px;
            align-items: center;
        }

        .detail-actions .btn-sm {
            padding: 6px 14px;
            font-size: 0.78rem;
            border-radius: 18px;
        }

        /* ===== 详情页相关MOD ===== */
        .detail-related-mods {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 2px solid var(--border);
            grid-column: 1 / -1;
            min-width: 0;
        }

        .detail-related-mods-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 10px;
        }

        .detail-mod-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            margin-bottom: 8px;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .detail-mod-item:hover {
            border-color: rgba(155, 138, 189, 0.3);
            box-shadow: 0 2px 12px rgba(155, 138, 189, 0.08);
        }

        .detail-mod-item-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .detail-mod-item-icon.translation {
            background: rgba(59, 130, 246, 0.12);
        }

        .detail-mod-item-icon.model {
            background: rgba(168, 85, 247, 0.12);
        }

        .detail-mod-item-icon.graphics {
            background: rgba(236, 72, 153, 0.12);
        }

        .detail-mod-item-icon.function {
            background: rgba(34, 197, 94, 0.12);
        }

        .detail-mod-item-icon.story {
            background: rgba(249, 115, 22, 0.12);
        }

        .detail-mod-item-icon.other {
            background: var(--glass-bg-light);
        }

        .detail-mod-item-body {
            flex: 1;
            min-width: 0;
        }

        .detail-mod-item-title {
            font-weight: 600;
            font-size: 0.88rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .detail-mod-item-meta {
            font-size: 0.72rem;
            color: var(--text3);
            display: flex;
            gap: 8px;
            margin-top: 2px;
        }

        .detail-mod-item-link {
            font-size: 0.75rem;
            color: var(--accent);
            text-decoration: none;
            flex-shrink: 0;
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid var(--accent);
            transition: all 0.2s;
        }

        .detail-mod-item-link:hover {
            background: var(--accent);
            color: #fff;
        }

        .detail-mods-empty {
            font-size: 0.85rem;
            color: var(--text3);
            padding: 8px 0;
        }

        .game-name-link {
            color: var(--accent);
            cursor: pointer;
            text-decoration: none;
            font-weight: 600;
        }

        .game-name-link:hover {
            text-decoration: underline;
        }

        .mod-compose .form-group {
            position: relative;
        }

        .mod-autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            max-height: 180px;
            overflow-y: auto;
            z-index: 2100;
            box-shadow: var(--shadow-lg);
            display: none;
        }

        .mod-autocomplete-list.show {
            display: block;
        }

        .mod-autocomplete-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.85rem;
            color: var(--text);
            transition: background 0.15s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mod-autocomplete-item:hover {
            background: var(--card-hover);
        }

        .mod-autocomplete-item img {
            width: 32px;
            height: 18px;
            object-fit: cover;
            border-radius: 4px;
            background: var(--tag-bg);
        }

        .mod-post-report-btn {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--text3);
            font-size: 0.8rem;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .mod-post-report-btn:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.08);
        }

        .mod-report-overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .mod-report-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .mod-report-modal {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 18px;
            width: 92%;
            max-width: 460px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: translateY(20px) scale(0.95);
            transition: transform 0.3s;
        }

        .mod-report-overlay.show .mod-report-modal {
            transform: translateY(0) scale(1);
        }

        .mod-report-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px 0;
        }

        .mod-report-title {
            font-weight: 700;
            font-size: 1.05rem;
            color: var(--text);
        }

        .mod-report-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--text3);
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .mod-report-close:hover {
            background: var(--tag-bg);
            color: var(--text);
        }

        .mod-report-body {
            padding: 16px 20px;
        }

        .mod-report-category-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 10px;
        }

        .mod-report-categories {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 18px;
        }

        .mod-report-cat {
            cursor: pointer;
        }

        .mod-report-cat input[type="radio"] {
            display: none;
        }

        .mod-report-cat-box {
            display: block;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 0.88rem;
            color: var(--text2);
            transition: all 0.2s;
            background: var(--surface2);
        }

        .mod-report-cat:hover .mod-report-cat-box {
            border-color: var(--accent);
            color: var(--text);
        }

        .mod-report-cat input[type="radio"]:checked+.mod-report-cat-box {
            border-color: #ef4444;
            background: rgba(239, 68, 68, 0.06);
            color: #ef4444;
            font-weight: 600;
        }

        .mod-report-desc-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 8px;
        }

        .mod-report-desc {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface2);
            color: var(--text);
            font-size: 0.88rem;
            resize: vertical;
            outline: none;
            font-family: inherit;
            line-height: 1.5;
            box-sizing: border-box;
        }

        .mod-report-desc:focus {
            border-color: var(--accent);
        }

        .mod-report-desc::placeholder {
            color: var(--text3);
        }

        .mod-report-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 0 20px 18px;
        }

        .mod-report-cancel {
            padding: 8px 18px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface2);
            color: var(--text2);
            font-size: 0.88rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mod-report-cancel:hover {
            background: var(--tag-bg);
        }

        .mod-report-submit {
            padding: 8px 22px;
            border: none;
            border-radius: 10px;
            background: #ef4444;
            color: #fff;
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mod-report-submit:hover {
            background: #dc2626;
        }

        /* MOD 编辑弹窗 */
        .mod-edit-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .mod-edit-overlay.show {
            display: flex;
        }

        .mod-edit-modal {
            background: var(--surface2);
            border-radius: 16px;
            border: 1px solid var(--border);
            width: 100%;
            max-width: 520px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 16px 64px rgba(60, 30, 80, 0.25);
        }

        .mod-edit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }

        .mod-edit-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text);
        }

        .mod-edit-close {
            background: none;
            border: none;
            font-size: 1.1rem;
            color: var(--text3);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: all 0.2s;
        }

        .mod-edit-close:hover {
            color: var(--text);
            background: var(--tag-bg);
        }

        .mod-edit-body {
            padding: 16px 20px;
        }

        .mod-edit-body .form-group {
            margin-bottom: 12px;
        }

        .mod-edit-body .form-group label {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 3px;
            color: var(--text2);
        }

        .mod-edit-body .form-group input,
        .mod-edit-body .form-group select,
        .mod-edit-body .form-group textarea {
            width: 100%;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-size: 0.88rem;
            font-family: inherit;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .mod-edit-body .form-group textarea {
            min-height: 100px;
            resize: vertical;
            line-height: 1.6;
        }

        .mod-edit-body .form-group input:focus,
        .mod-edit-body .form-group select:focus,
        .mod-edit-body .form-group textarea:focus {
            border-color: var(--accent);
            outline: none;
        }

        .mod-edit-body .form-row {
            display: flex;
            gap: 10px;
        }

        .mod-edit-body .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }

        .mod-edit-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 20px;
            border-top: 1px solid var(--border);
        }

        .mod-edit-footer .btn {
            padding: 7px 18px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s;
            font-family: inherit;
        }

        .mod-edit-footer .btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .mod-edit-footer .btn-primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .mod-edit-footer .btn-primary:hover {
            background: var(--accent2);
            border-color: var(--accent2);
            color: #fff;
        }

        /* ================================================================
   ★★★ 图片查看器浮窗 ★★★
   ================================================================ */
        #imageViewerOverlay {
            z-index: 2100;
            background: rgba(0, 0, 0, 0.75);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #imageViewerOverlay .modal {
            background: transparent;
            padding: 20px;
            border: none;
            box-shadow: none;
            min-height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #imageViewerOverlay img {
            max-width: 95vw;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 12px;
            box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
        }

        #imageViewerClose {
            position: fixed;
            top: 20px;
            right: 30px;
            z-index: 1101;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            font-size: 2rem;
            padding: 0 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
            line-height: 1.8;
        }

        #imageViewerClose:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: scale(1.05);
        }

        /* ================================================================
   ★★★ 玩过记录卡片 — 宽屏5列 ★★★
   ================================================================ */
        .played-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 18px;
        }

        .played-grid-item {
            background: var(--surface);
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border);
            transition: transform 0.25s, box-shadow 0.25s;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .played-grid-item:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: var(--shadow);
            border-color: var(--accent);
        }

        .played-grid-item .item-cover {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
            background: var(--tag-bg);
            display: block;
        }

        .played-grid-item .item-cover-placeholder {
            width: 100%;
            aspect-ratio: 16/9;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--tag-bg);
            color: var(--text3);
            font-size: 2.6rem;
        }

        .played-grid-item .item-title {
            padding: 10px 12px;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--text);
            text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
            min-height: calc(0.92rem * 1.4 * 2 + 10px * 2);
            background: var(--surface);
            border-top: 1px solid var(--border);
        }

        .played-grid-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text3);
            font-size: 1rem;
        }

        .played-grid-empty .empty-icon {
            font-size: 3rem;
            display: block;
            margin-bottom: 12px;
        }

        .played-footer {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text3);
            margin-top: 8px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            opacity: 0.7;
            letter-spacing: 0.06em;
        }

        /* 响应式：玩过记录卡片列数递减 */
        @media (max-width: 1200px) {
            .played-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 992px) {
            .played-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .played-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }

            .played-grid-item .item-title {
                font-size: 0.78rem;
                padding: 6px 8px;
            }

            .played-grid-item .item-cover-placeholder {
                font-size: 2rem;
            }
        }

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

            .played-grid-item .item-title {
                font-size: 0.7rem;
                padding: 4px 6px;
            }

            .played-grid-item .item-cover-placeholder {
                font-size: 1.6rem;
            }
        }

        /* ================================================================
   ★★★ 打赏弹窗 — 经典设计 ★★★
   ================================================================ */
        #tipModalOverlay {
            background: var(--overlay);
            padding: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            z-index: 99999;
        }

        #tipModalOverlay.show {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        #tipModalOverlay .modal {
            max-width: 560px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            min-height: auto;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            transform: scale(0.96) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #tipModalOverlay.show .modal {
            transform: scale(1) translateY(0);
        }

        #tipModalOverlay .modal-close {
            display: flex !important;
            position: sticky;
            top: 0;
            float: right;
            font-size: 1.6rem;
            cursor: pointer;
            color: var(--text2);
            z-index: 10;
            background: var(--modal-bg);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            transition: all .2s;
            margin-left: 8px;
            margin-bottom: 4px;
        }

        #tipModalOverlay .modal-close:hover {
            color: var(--danger);
            border-color: var(--danger);
            transform: rotate(90deg);
        }

        #tipModalOverlay #tipModal h2 {
            text-align: center;
            margin-bottom: 2px;
            color: var(--coin-color);
        }

        #tipModalOverlay #tipModal .tip-sub {
            text-align: center;
            color: var(--text2);
            margin-bottom: 18px;
            font-size: 0.95rem;
        }

        #tipModalOverlay #tipModal .tip-card {
            background: var(--surface2);
            border-radius: 16px;
            padding: 24px 20px;
            border: 2px solid var(--accent);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #tipModalOverlay #tipModal .tip-card .tip-qrcode {
            max-width: 280px;
            width: 100%;
            height: auto;
            border-radius: 12px;
        }

        #tipModalOverlay #tipModal .tip-card .tip-hint {
            color: var(--text2);
            font-size: 0.85rem;
            margin-top: 12px;
            margin-bottom: 0;
        }

        #tipModalOverlay #tipModal .tip-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 18px 0;
            color: var(--text3);
            font-size: 0.8rem;
        }

        #tipModalOverlay #tipModal .tip-divider::before,
        #tipModalOverlay #tipModal .tip-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        #tipModalOverlay #tipModal .tip-link-btn {
            display: block;
            width: fit-content;
            margin: 0 auto;
            padding: 12px 32px;
            background: var(--accent);
            color: #fff;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all .2s;
        }

        #tipModalOverlay #tipModal .tip-link-btn:hover {
            background: var(--accent2);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(155, 138, 189, 0.30);
        }

        #tipModalOverlay #tipModal .tip-footer {
            text-align: center;
            font-size: 0.7rem;
            color: var(--text3);
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        /* ================================================================
   ★★★ 分享浮层 — 直接展示生成的图片 (移动端可长按保存) ★★★
   ================================================================ */
        #shareFloatOverlay {
            position: fixed;
            inset: 0;
            z-index: 2200;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeInOverlay 0.3s ease;
        }

        #shareFloatOverlay.show {
            display: flex;
        }

        @keyframes fadeInOverlay {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        #shareFloatOverlay .share-float-card {
            background: var(--bg);
            border-radius: 24px;
            max-width: 520px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            animation: slideUpCard 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 20px 20px 24px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            box-sizing: border-box;
        }

        @keyframes slideUpCard {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        #shareFloatOverlay .share-float-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            font-weight: 600;
            color: var(--text2);
            font-size: 0.95rem;
            width: 100%;
        }

        #shareFloatOverlay .share-float-header .close-float-btn {
            background: none;
            border: none;
            font-size: 1.3rem;
            cursor: pointer;
            color: var(--text3);
            padding: 0 6px;
            transition: color 0.2s, transform 0.2s;
            line-height: 1;
        }

        #shareFloatOverlay .share-float-header .close-float-btn:hover {
            color: var(--danger);
            transform: rotate(90deg);
        }

        #shareFloatOverlay .share-float-header .hint-text {
            font-size: 0.8rem;
            color: var(--text3);
        }

        #shareFloatOverlay .share-image-container {
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            background: #fff;
            display: flex;
            justify-content: center;
            min-width: 0;
        }

        #shareFloatOverlay .share-image-container img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 16px;
            -webkit-user-drag: none;
            user-drag: none;
        }

        #shareFloatOverlay .share-float-download-wrap {
            text-align: center;
            margin-top: 12px;
            width: 100%;
        }

        #shareFloatOverlay .share-float-download-wrap .btn {
            padding: 8px 28px;
            font-size: 0.88rem;
            border-radius: 24px;
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
            max-width: 240px;
        }

        #shareFloatOverlay .share-float-download-wrap .btn:hover {
            background: var(--accent2);
            border-color: var(--accent2);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(155, 138, 189, 0.30);
        }

        /* 移动端长按提示 */
        .long-press-hint {
            font-size: 0.7rem;
            color: var(--text3);
            text-align: center;
            margin-top: 6px;
        }

        @media (max-width: 768px) {
            #shareFloatOverlay .share-float-card {
                padding: 16px 14px 20px;
                border-radius: 20px;
            }

            #shareFloatOverlay .share-float-header .hint-text {
                font-size: 0.7rem;
            }
        }

        @media (max-width: 480px) {
            #shareFloatOverlay .share-float-card {
                padding: 12px 10px 16px;
                border-radius: 16px;
                max-width: 100%;
            }

            #shareFloatOverlay .share-float-header .hint-text {
                font-size: 0.65rem;
            }

            #shareFloatOverlay .share-float-download-wrap .btn {
                font-size: 0.8rem;
                padding: 6px 20px;
            }
        }

        /* ================================================================
   ★★★ 其他弹窗 (成就/登录/个人资料/我的评论) ★★★
   ================================================================ */
        #achievementModalOverlay .modal {
            max-width: 900px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            min-height: auto;
            max-height: calc(100vh - 40px);
            background: var(--modal-bg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            overflow-y: auto;
        }

        #achievementModalOverlay .modal-close {
            display: flex !important;
            position: sticky;
            top: 0;
            float: right;
            font-size: 1.6rem;
            cursor: pointer;
            color: var(--text2);
            z-index: 10;
            background: var(--modal-bg);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            transition: all .2s;
            margin-left: 8px;
            margin-bottom: 4px;
        }

        #achievementModalOverlay .modal-close:hover {
            color: var(--danger);
            border-color: var(--danger);
            transform: rotate(90deg);
        }

        #achievementModalOverlay {
            background: var(--overlay);
            padding: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            z-index: 99999;
        }

        #achievementModalOverlay.show {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        #achievementModalOverlay .modal {
            transform: scale(0.96) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #achievementModalOverlay.show .modal {
            transform: scale(1) translateY(0);
        }

        #authModalOverlay {
            background: var(--overlay);
            padding: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            z-index: 99999;
        }

        #authModalOverlay.show {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        #authModalOverlay .modal {
            max-width: 440px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            min-height: auto;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            transform: scale(0.96) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #authModalOverlay.show .modal {
            transform: scale(1) translateY(0);
        }

        #authModalOverlay .modal-close {
            display: flex !important;
            position: sticky;
            top: 0;
            float: right;
            font-size: 1.6rem;
            cursor: pointer;
            color: var(--text2);
            z-index: 10;
            background: var(--modal-bg);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            transition: all .2s;
            margin-left: 8px;
            margin-bottom: 4px;
        }

        #authModalOverlay .modal-close:hover {
            color: var(--danger);
            border-color: var(--danger);
            transform: rotate(90deg);
        }

        #profileModalOverlay {
            background: var(--overlay);
            padding: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            z-index: 99999;
        }

        #profileModalOverlay.show {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        #profileModalOverlay .modal {
            max-width: 480px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            min-height: auto;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            transform: scale(0.96) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #profileModalOverlay.show .modal {
            transform: scale(1) translateY(0);
        }

        #profileModalOverlay .modal-close {
            display: flex !important;
            position: sticky;
            top: 0;
            float: right;
            font-size: 1.6rem;
            cursor: pointer;
            color: var(--text2);
            z-index: 10;
            background: var(--modal-bg);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            transition: all .2s;
            margin-left: 8px;
            margin-bottom: 4px;
        }

        #profileModalOverlay .modal-close:hover {
            color: var(--danger);
            border-color: var(--danger);
            transform: rotate(90deg);
        }

        #myReviewsModalOverlay {
            background: var(--overlay);
            padding: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            z-index: 99999;
        }

        #myReviewsModalOverlay.show {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        #myReviewsModalOverlay .modal {
            max-width: 700px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            min-height: auto;
            max-height: 85vh;
            overflow-y: auto;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            transform: scale(0.96) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #myReviewsModalOverlay.show .modal {
            transform: scale(1) translateY(0);
        }

        #myReviewsModalOverlay .modal-close {
            display: flex !important;
            position: sticky;
            top: 0;
            float: right;
            font-size: 1.6rem;
            cursor: pointer;
            color: var(--text2);
            z-index: 10;
            background: var(--modal-bg);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            transition: all .2s;
            margin-left: 8px;
            margin-bottom: 4px;
        }

        #myReviewsModalOverlay .modal-close:hover {
            color: var(--danger);
            border-color: var(--danger);
            transform: rotate(90deg);
        }

        /* ===== 屏蔽内容管理弹窗 ===== */
        #blockModalOverlay {
            background: var(--overlay);
            padding: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            z-index: 99999;
        }
        #blockModalOverlay.show {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }
        #blockModalOverlay .modal {
            max-width: 480px;
            margin: 0 auto;
            border-radius: 24px;
            padding: 28px 24px;
            max-height: 85vh;
            overflow-y: auto;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            transform: scale(0.96) translateY(10px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #blockModalOverlay.show .modal {
            transform: scale(1) translateY(0);
        }
        #blockModalOverlay .modal-close {
            display: flex !important;
            position: sticky;
            top: 0;
            float: right;
            font-size: 1.6rem;
            cursor: pointer;
            color: var(--text2);
            z-index: 10;
            background: var(--modal-bg);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        #blockModalOverlay .modal-close:hover {
            color: var(--danger);
            transform: rotate(90deg);
        }
        #blockAdultToggle::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px;
            width: 20px; height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #blockAdultToggle.on { background: var(--accent); }
        #blockAdultToggle.on::after { transform: translateX(22px); }

        .block-dim-group {
            margin-bottom: 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        .block-dim-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: var(--glass-bg-light);
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }
        .block-dim-header:hover { background: var(--accent-light); }
        .block-dim-name {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .block-dim-badge {
            font-size: 0.68rem;
            padding: 1px 8px;
            border-radius: 8px;
            background: rgba(192, 57, 43, 0.12);
            color: var(--danger);
            font-weight: 600;
        }
        .block-dim-arrow {
            font-size: 0.7rem;
            color: var(--text3);
            transition: transform 0.3s ease;
        }
        .block-dim-group.open .block-dim-arrow { transform: rotate(180deg); }
        .block-dim-body {
            display: none;
            padding: 10px 12px;
            gap: 6px;
            flex-wrap: wrap;
        }
        .block-dim-group.open .block-dim-body { display: flex; }
        .block-tag-toggle {
            padding: 5px 12px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--glass-bg-light);
            color: var(--tag-text);
            cursor: pointer;
            font-size: 0.76rem;
            transition: all 0.2s;
            white-space: nowrap;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-family: inherit;
        }
        .block-tag-toggle:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        .block-tag-toggle.excluded {
            background: rgba(192, 57, 43, 0.10);
            color: var(--danger);
            border-color: rgba(192, 57, 43, 0.25);
            text-decoration: line-through;
        }
        .block-tag-toggle .check-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--border);
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .block-tag-toggle.excluded .check-dot { background: var(--danger); }
        #blockTagSearch:focus { border-color: var(--accent); }
        #blockTagSearch::placeholder { color: var(--text3); }

        /* ===== 其他组件 ===== */
        .achievement-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--border);
            justify-content: center;
            position: sticky;
            top: 0;
            background: var(--modal-bg);
            z-index: 5;
            padding-top: 4px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .achievement-tabs::-webkit-scrollbar {
            display: none;
        }

        .achievement-tab-btn {
            padding: 10px 28px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: transparent;
            color: var(--text2);
            transition: all 0.2s;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            font-family: inherit;
            white-space: nowrap;
        }

        .achievement-tab-btn:hover {
            color: var(--text);
        }

        .achievement-tab-btn.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        .achievement-tab-content {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .achievement-tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .played-grid-header {
            text-align: center;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 16px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }

        .achievement-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 8px;
        }

        .achievement-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            transition: all .2s;
        }

        .achievement-item.unlocked {
            border-color: var(--gold);
            background: rgba(245, 166, 35, 0.06);
            box-shadow: 0 0 20px var(--gold-glow);
        }

        .achievement-item .ach-icon {
            font-size: 1.8rem;
            flex-shrink: 0;
            width: 44px;
            text-align: center;
        }

        .achievement-item .ach-info {
            flex: 1;
        }

        .achievement-item .ach-name {
            font-weight: 600;
            font-size: .95rem;
            color: var(--text);
        }

        .achievement-item .ach-desc {
            font-size: .78rem;
            color: var(--text2);
        }

        .achievement-item .ach-status {
            font-size: .85rem;
            flex-shrink: 0;
            padding: 2px 10px;
            border-radius: 10px;
            font-weight: 500;
        }

        .achievement-item .ach-status.locked {
            color: var(--text3);
            background: var(--tag-bg);
        }

        .achievement-item .ach-status.unlocked {
            color: var(--gold);
            background: rgba(245, 166, 35, 0.15);
        }

        .achievement-progress {
            margin-top: 16px;
            padding: 14px 16px;
            border-radius: 12px;
            background: var(--surface2);
            border: 1px solid var(--border);
            text-align: center;
        }

        .achievement-progress .progress-text {
            font-size: .9rem;
            color: var(--text2);
        }

        .achievement-progress .progress-text strong {
            color: var(--text);
        }

        .achievement-progress .progress-bar {
            width: 100%;
            height: 6px;
            background: var(--tag-bg);
            border-radius: 3px;
            margin-top: 8px;
            overflow: hidden;
        }

        .achievement-progress .progress-bar .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--gold), #f7c948);
            border-radius: 3px;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            width: 0%;
        }

        .star-rating {
            display: inline-flex;
            gap: 2px;
            font-size: 1.6rem;
            user-select: none;
        }

        .star-rating .star {
            cursor: pointer;
            color: var(--text3);
            transition: color 0.15s, transform 0.15s;
            line-height: 1;
        }

        .star-rating .star.active {
            color: var(--gold);
        }

        .star-rating .star.hover {
            color: var(--gold);
        }

        .star-rating .star:hover {
            color: var(--gold);
            transform: scale(1.15);
        }

        /* 表态档位样式 */
        .verdict-strip {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .verdict-pill {
            flex: 1;
            min-width: 60px;
            padding: 8px 6px;
            border-radius: 10px;
            border: 2px solid var(--border);
            background: var(--surface);
            cursor: pointer;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text2);
            transition: all 0.2s;
            user-select: none;
            line-height: 1.3;
        }
        .verdict-pill:hover {
            border-color: var(--accent);
            background: var(--tag-bg);
        }
        .verdict-pill.on {
            border-color: var(--accent);
            background: var(--accent);
            color: #fff;
            transform: scale(1.05);
        }
        .verdict-pill .verdict-emoji {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 2px;
        }

        /* 标签池样式 */
        .tag-pool {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        .tag-dimension-label {
            width: 100%;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text2);
            margin-top: 6px;
            margin-bottom: 2px;
        }
        .tag-chip {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 14px;
            font-size: 0.78rem;
            font-weight: 500;
            cursor: pointer;
            border: 1.5px solid transparent;
            transition: all 0.15s;
            user-select: none;
            line-height: 1.5;
        }
        .tag-chip.pos {
            background: #e3f5e3;
            color: #1a6b1a;
            border-color: #b8e0b8;
        }
        .tag-chip.neg {
            background: #fde8e8;
            color: #a12b2b;
            border-color: #f0c8c8;
        }
        .tag-chip.on {
            border-width: 2px;
        }
        .tag-chip.pos.on {
            background: #2e8b2e;
            color: #fff;
            border-color: #2e8b2e;
        }
        .tag-chip.neg.on {
            background: #c0392b;
            color: #fff;
            border-color: #c0392b;
        }
        .tag-chip.muted {
            opacity: 0.35;
            cursor: not-allowed;
        }

        /* 标签平铺展示（只读） */
        .tags-display {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        .tags-display .tag-chip {
            cursor: default;
        }

        /* 社区评论中的表态+标签 行 */
        .comment-verdict-tags-row {
            margin: 2px 0 6px 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }
        .comment-verdict-tags-row .tags-display {
            margin-top: 0; /* 取消标签自身的 margin-top，避免与表态标签上下错位 */
        }
        .comment-verdict {
            font-weight: 700;
            font-size: 0.98rem;
            margin-right: 4px;
            white-space: nowrap;
        }

        .comment-item {
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 8px;
            border: 1px solid var(--border);
        }

        .comment-item:last-child {
            border-bottom: 1px solid var(--border);
        }

        .comment-item .comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            flex-wrap: wrap;
        }

        .comment-item .comment-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            flex-shrink: 0;
        }

        .comment-item .comment-name {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
        }

        .comment-custom-id {
            font-size: 0.72rem;
            color: var(--accent);
            font-weight: 500;
            margin-left: 4px;
            opacity: 0.9;
        }

        .comment-reply-item-name + .comment-custom-id,
        .comment-reply-item .comment-custom-id {
            font-size: 0.7rem;
            margin-left: 2px;
        }

        .comment-item .comment-stars {
            color: var(--gold);
            font-size: 0.9rem;
        }

        .comment-item .comment-time {
            font-size: 0.7rem;
            color: var(--text3);
            white-space: nowrap;
            margin-right: 6px;
        }

        .comment-item .comment-text {
            font-size: 0.85rem;
            color: var(--text2);
            word-break: break-word;
            line-height: 1.5;
            margin-top: 2px;
            white-space: pre-wrap;
        }

        /* 剧透遮挡（Steam风格） */
        .comment-spoiler {
            background: var(--text2);
            color: var(--text2);
            border-radius: 3px;
            padding: 0 3px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            user-select: none;
        }
        .comment-spoiler:hover {
            background: var(--text3);
            color: var(--text3);
        }
        .comment-spoiler.revealed {
            background: rgba(255, 200, 0, 0.12);
            color: var(--text);
            border-bottom: 1px dashed var(--accent);
        }
        .comment-spoiler-btn {
            font-size: 0.7rem;
            padding: 2px 8px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: transparent;
            color: var(--text3);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .comment-spoiler-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* ===== 游戏评论嵌套回复样式 ===== */
        .comment-reply-btn {
            font-size: 0.7rem;
            padding: 2px 8px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: transparent;
            color: var(--text3);
            cursor: pointer;
            transition: all 0.2s;
        }

        .comment-reply-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(155, 138, 189, 0.08);
        }

        .comment-reply-list {
            margin-top: 8px;
            padding-left: 16px;
            border-left: 2px solid var(--border);
        }

        .comment-reply-item {
            padding: 6px 0;
            border-bottom: 1px dashed var(--border);
        }

        .comment-reply-item:last-child {
            border-bottom: none;
        }

        .comment-reply-item-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 2px;
        }

        .comment-reply-item-avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
        }

        .comment-reply-item-name {
            font-weight: 600;
            font-size: 0.72rem;
            color: var(--text);
        }

        .comment-reply-item-time {
            font-size: 0.62rem;
            color: var(--text3);
        }

        .comment-reply-item-content {
            font-size: 0.78rem;
            color: var(--text2);
            line-height: 1.5;
            word-break: break-word;
        }

        .comment-reply-to-label {
            color: var(--accent);
            font-size: 0.72rem;
            margin-right: 4px;
        }

        .comment-reply-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 3px;
        }

        .comment-reply-item-actions .comment-reply-btn,
        .comment-reply-item-actions .comment-reply-delete-btn {
            font-size: 0.6rem;
            padding: 1px 6px;
            opacity: 0.7;
        }

        .comment-reply-delete-btn {
            font-size: 0.6rem;
            padding: 1px 6px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: transparent;
            color: var(--text3);
            cursor: pointer;
            transition: all 0.2s;
        }

        .comment-reply-delete-btn:hover {
            border-color: var(--danger);
            color: var(--danger);
        }

        .comment-nested-reply-list {
            margin-top: 6px;
            padding-left: 14px;
            border-left: 2px solid var(--border);
        }

        .comment-nested-reply-compose {
            margin-top: 6px;
            padding: 8px;
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .comment-nested-reply-compose textarea {
            width: 100%;
            min-height: 36px;
            padding: 6px 8px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg);
            color: var(--text);
            font-size: 0.78rem;
            resize: vertical;
            font-family: inherit;
        }

        .comment-nested-reply-compose textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .comment-reply-compose {
            margin-top: 8px;
            padding: 8px;
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .comment-reply-compose textarea {
            width: 100%;
            min-height: 50px;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg);
            color: var(--text);
            font-size: 0.82rem;
            resize: vertical;
            font-family: inherit;
        }

        .comment-reply-compose textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .comment-reply-compose-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 6px;
        }

        .comment-reply-compose-actions .btn {
            padding: 4px 12px;
            font-size: 0.78rem;
        }

        .review-login-prompt {
            text-align: center;
            color: var(--text3);
            padding: 10px 0;
        }

        .comment-input {
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-family: inherit;
            resize: vertical;
            min-height: 60px;
            transition: border-color 0.2s;
            font-size: 0.85rem;
        }

        .comment-input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .comment-char-count {
            font-size: 0.75rem;
            color: var(--text3);
        }

        .no-results {
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
            font-size: 1rem;
        }

        .no-results .icon {
            font-size: 3rem;
            display: block;
            margin-bottom: 10px;
            animation: floatEmoji 3s ease-in-out infinite;
        }

        @keyframes floatEmoji {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .loading-spinner {
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
            font-size: 1rem;
        }

        .loading-spinner .spinner-icon {
            font-size: 3rem;
            display: block;
            margin: 0 auto 12px;
            animation: dogRun 0.6s ease-in-out infinite alternate;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }

        @keyframes dogRun {
            0% {
                transform: translateY(0) rotate(-5deg) scaleX(1);
            }

            25% {
                transform: translateY(-12px) rotate(0deg) scaleX(1.05);
            }

            50% {
                transform: translateY(-6px) rotate(3deg) scaleX(0.95);
            }

            75% {
                transform: translateY(-14px) rotate(0deg) scaleX(1.05);
            }

            100% {
                transform: translateY(0) rotate(5deg) scaleX(1);
            }
        }

        .loading-dog-trail {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin-top: 8px;
            height: 6px;
        }

        .loading-dog-trail span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.3;
            animation: trailPulse 1.2s ease-in-out infinite;
        }

        .loading-dog-trail span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .loading-dog-trail span:nth-child(3) {
            animation-delay: 0.3s;
        }

        @keyframes trailPulse {

            0%,
            100% {
                opacity: 0.15;
                transform: scale(0.8);
            }

            50% {
                opacity: 0.5;
                transform: scale(1.2);
            }
        }

        .loading-spinner .spinner-text {
            margin-top: 4px;
            font-size: 0.85rem;
        }

        .toast-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background-color: rgba(248, 244, 252, 0.92);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(155, 138, 189, 0.035) 3px,
                    rgba(155, 138, 189, 0.035) 4px
                );
            color: var(--text);
            padding: 24px 48px;
            border-radius: 16px;
            border: 1px solid rgba(190, 180, 210, 0.6);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.7),
                inset 0 -1px 0 rgba(60, 30, 80, 0.04),
                inset 2px 0 10px rgba(155, 138, 189, 0.06),
                inset -2px 0 10px rgba(155, 138, 189, 0.06),
                0 8px 32px rgba(60, 30, 80, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.3);
            z-index: 999999;
            font-size: 1.1rem;
            font-weight: 600;
            max-width: 90vw;
            max-height: calc(100vh - 40px);
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .toast-notification::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
                radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
            z-index: 0;
        }

        .toast-notification::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
            z-index: 0;
        }

        .toast-notification > * { position: relative; z-index: 1; }

        [data-theme="dark"] .toast-notification {
            background-color: rgba(48, 42, 54, 0.92);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(155, 138, 189, 0.025) 3px,
                    rgba(155, 138, 189, 0.025) 4px
                );
            border: 1px solid rgba(90, 80, 105, 0.6);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                inset 0 -1px 0 rgba(0, 0, 0, 0.15),
                inset 2px 0 10px rgba(120, 100, 150, 0.06),
                inset -2px 0 10px rgba(120, 100, 150, 0.06),
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.06);
        }

        [data-theme="dark"] .toast-notification::before {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
                radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
        }

        [data-theme="dark"] .toast-notification::after {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        .toast-notification.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        .toast-notification.achievement-toast {
            border-color: rgba(245, 166, 35, 0.5);
            background-color: rgba(255, 248, 235, 0.92);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(245, 166, 35, 0.04) 3px,
                    rgba(245, 166, 35, 0.04) 4px
                );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.7),
                inset 0 -1px 0 rgba(180, 100, 20, 0.05),
                inset 2px 0 10px rgba(245, 166, 35, 0.08),
                inset -2px 0 10px rgba(245, 166, 35, 0.08),
                0 8px 32px rgba(180, 100, 20, 0.2),
                0 0 30px var(--gold-glow);
            font-size: 1.15rem;
        }

        /* ========== 头衔徽章样式 ========== */
        .title-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 700;
            white-space: nowrap;
            position: relative;
            line-height: 1.4;
            font-family: inherit;
        }
        .title-badge .badge-icon {
            font-size: 0.76rem;
            line-height: 1;
        }
        .title-badge.bronze {
            background: var(--tier-bronze-bg);
            color: #fff;
            box-shadow: 0 1px 2px rgba(160, 128, 104, 0.15);
        }
        .title-badge.silver {
            background: var(--tier-silver-bg);
            color: #fff;
            box-shadow: 0 1px 2px rgba(130, 138, 150, 0.15);
            border: 1px solid rgba(255,255,255,0.18);
        }
        .title-badge.gold {
            background: var(--tier-gold-bg);
            color: #4a3818;
            box-shadow: 0 1px 3px rgba(184, 150, 72, 0.12);
            border: 1px solid rgba(220, 192, 136, 0.25);
        }
        .title-badge.diamond {
            background: var(--tier-diamond-bg);
            color: #fff;
            box-shadow: 0 1px 4px rgba(138, 130, 168, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: diamondShimmer 3s ease-in-out infinite;
        }
        @keyframes diamondShimmer {
            0%, 100% { box-shadow: 0 1px 4px rgba(138, 130, 168, 0.15); }
            50% { box-shadow: 0 1px 6px rgba(138, 130, 168, 0.22); }
        }

        /* 评论区头衔徽章容器：紧跟在 custom_id 后面，支持多个徽章并排 */
        .comment-header-titles {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .comment-header-titles .title-badge {
            margin-left: 0;
            font-size: 0.86rem;
            padding: 3px 10px;
        }

        /* 头衔展示柜 */
        .title-cabinet-section {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
            width: 100%;
        }
        .title-cabinet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .title-cabinet-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text);
        }
        .title-cabinet-progress {
            font-size: 0.72rem;
            color: var(--accent2);
            font-weight: 600;
        }
        .title-category-label {
            font-size: 0.74rem;
            color: var(--accent2);
            font-weight: 600;
            margin: 12px 0 6px;
        }
        .title-cabinet {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 8px;
        }
        .cabinet-slot {
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 10px;
            padding: 10px 8px;
            text-align: center;
            transition: all 0.2s;
            cursor: pointer;
            position: relative;
        }
        .cabinet-slot.unlocked { border-color: var(--accent); }
        .cabinet-slot.locked { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
        .cabinet-slot.equipped {
            border-color: var(--gold);
            box-shadow: 0 0 12px var(--gold-glow);
        }
        .cabinet-slot:not(.locked):hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        .cabinet-slot .equip-tag {
            position: absolute;
            top: -6px;
            right: -6px;
            background: var(--gold);
            color: #fff;
            font-size: 0.58rem;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 8px;
            white-space: nowrap;
        }
        .cabinet-slot .slot-icon { font-size: 1.2rem; margin-bottom: 3px; line-height: 1; }
        .cabinet-slot .slot-name {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 2px;
            line-height: 1.2;
        }
        .cabinet-slot .slot-cond { font-size: 0.6rem; color: var(--text3); line-height: 1.2; }

        /* 个人资料顶部的头衔显示 */
        .profile-header-titles {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }
        .profile-equipped-label {
            font-size: 0.7rem;
            color: var(--text3);
            text-align: center;
            margin-bottom: 4px;
        }

        /* 用户下拉菜单中的头衔 */
        .nav-user-menu-header-row {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }
        .nav-user-menu-header-row .title-badge {
            font-size: 0.62rem;
            padding: 1px 6px;
        }
        .nav-user-menu-header-row .title-badge .badge-icon {
            font-size: 0.66rem;
        }

        /* 游戏日记封面的头衔显示 */
        .diary-cover-titles {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }

        /* 成就解锁 Toast（头衔版） */
        .toast-notification.title-toast {
            border-color: rgba(155, 138, 189, 0.5);
            background-color: rgba(250, 247, 253, 0.92);
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
                repeating-linear-gradient(
                    0deg, transparent, transparent 3px,
                    rgba(155, 138, 189, 0.04) 3px,
                    rgba(155, 138, 189, 0.04) 4px
                );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.7),
                inset 0 -1px 0 rgba(100, 80, 130, 0.05),
                inset 2px 0 10px rgba(155, 138, 189, 0.08),
                inset -2px 0 10px rgba(155, 138, 189, 0.08),
                0 8px 32px rgba(80, 50, 100, 0.2),
                0 0 30px var(--glow-color);
        }
        .toast-title-icon { font-size: 1.6rem; margin-bottom: 6px; display: block; }
        .toast-title-badge { margin: 6px 0; }
        .toast-title-subtitle { font-size: 0.78rem; color: var(--text3); margin-top: 4px; font-weight: 500; }

        @media (max-width: 768px) {
            .toast-notification {
                padding: 18px 24px;
                font-size: 0.98rem;
                max-width: calc(100vw - 24px);
            }
            .toast-title-icon { font-size: 1.4rem; }
        }

        @media (max-width: 480px) {
            .toast-notification {
                padding: 16px 18px;
                font-size: 0.92rem;
            }
            .toast-title-subtitle { font-size: 0.72rem; }
        }

        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
            width: 0%;
            z-index: 9990;
            transition: width 0.08s linear;
            box-shadow: 0 0 12px rgba(155, 138, 189, 0.30);
            border-radius: 0 2px 2px 0;
        }

        [data-theme="dark"] .scroll-progress {
            box-shadow: 0 0 12px rgba(184, 162, 214, 0.20);
        }

        [data-theme="dark"] .tag-chip.pos {
            background: #1a3a1a;
            color: #8fdb8f;
            border-color: #2d5a2d;
        }
        [data-theme="dark"] .tag-chip.neg {
            background: #3a1a1a;
            color: #f08a8a;
            border-color: #5a2d2d;
        }
        [data-theme="dark"] .tag-chip.pos.on {
            background: #2e8b2e;
            color: #fff;
            border-color: #2e8b2e;
        }
        [data-theme="dark"] .tag-chip.neg.on {
            background: #c0392b;
            color: #fff;
            border-color: #c0392b;
        }
        [data-theme="dark"] .verdict-pill {
            background: var(--surface);
            border-color: var(--border);
            color: var(--text2);
        }
        [data-theme="dark"] .verdict-pill.on {
            background: var(--accent);
            color: #fff;
        }

        .form-group {
            margin-bottom: 14px;
        }

        .form-group label {
            display: block;
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 4px;
            color: var(--text2);
        }

        .form-group input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-size: 0.95rem;
            font-family: inherit;
            transition: border-color .25s;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(155, 138, 189, 0.15);
        }

        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-size: 0.85rem;
            font-family: inherit;
            transition: border-color .2s;
        }

        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 60px;
        }

        .form-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .form-row .form-group {
            flex: 1;
            min-width: 140px;
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            cursor: pointer;
            font-size: .82rem;
            color: var(--text);
        }

        .checkbox-group input[type="checkbox"] {
            width: auto;
            accent-color: var(--accent);
        }

        .tag-select-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            max-height: 150px;
            overflow-y: auto;
            padding: 6px 0;
        }

        .tag-select-panel .tag-option {
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            cursor: pointer;
            font-size: .75rem;
            background: var(--glass-bg-light);
            color: var(--tag-text);
            user-select: none;
            transition: all .15s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .tag-select-panel .tag-option.selected {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            font-weight: 600;
        }

        .tag-select-panel .tag-option:hover {
            border-color: var(--accent);
        }

        .add-tag-row {
            display: flex;
            gap: 6px;
            align-items: center;
            margin-top: 4px;
            margin-bottom: 6px;
        }

        .add-tag-row input {
            flex: 1;
            padding: 5px 10px;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-size: .75rem;
        }

        .profile-avatar-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
            background: var(--tag-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s;
            margin: 4px auto;
        }

        .profile-avatar-wrapper:hover {
            border-color: var(--accent);
        }

        .profile-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .profile-avatar-upload-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.35);
            color: #fff;
            font-size: 1.8rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.25s ease;
            border-radius: 50%;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .profile-avatar-wrapper:hover .profile-avatar-upload-label {
            opacity: 1;
        }

        .user-menu-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--surface);
            padding: 4px 12px 4px 8px;
            border-radius: 24px;
            border: 1.5px solid var(--border);
            transition: border-color 0.2s;
            position: relative;
            cursor: pointer;
            height: 40px;
        }

        .user-menu-wrapper:hover {
            border-color: var(--accent);
        }

        .user-menu-wrapper .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border);
            background: var(--tag-bg);
            flex-shrink: 0;
        }

        .user-menu-wrapper .user-name {
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text);
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-menu-wrapper .dropdown-arrow {
            color: var(--text3);
            font-size: 0.7rem;
            transition: transform 0.2s;
            line-height: 1;
        }

        .user-menu-wrapper .dropdown-arrow.open {
            transform: rotate(180deg);
        }

        #userDropdownMenu {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 6px 0;
            min-width: 170px;
            box-shadow: var(--shadow-lg);
            z-index: 9980;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #userDropdownMenu.show {
            display: block;
        }

        #userDropdownMenu .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            touch-action: manipulation;
            transition: all 0.2s;
        }

        #userDropdownMenu .dropdown-item:hover {
            background: var(--card-hover);
        }

        #userDropdownMenu .dropdown-item.danger {
            color: var(--danger);
        }

        #userDropdownMenu .divider {
            border: none;
            border-top: 1px solid var(--border);
            margin: 4px 8px;
        }

        .login-btn-header {
            padding: 6px 16px;
            border-radius: 20px;
            border: 1.5px solid var(--accent);
            background: transparent;
            color: var(--accent);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.25s;
            font-family: inherit;
            height: 40px;
        }

        .login-btn-header:hover {
            background: var(--accent);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(155, 138, 189, 0.30);
        }

        .my-reviews-header {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .my-reviews-sub {
            color: var(--text3);
            font-size: 0.9rem;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 10px;
        }

        .my-review-item {
            display: flex;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            margin-bottom: 10px;
            transition: border-color 0.2s, box-shadow 0.2s;
            cursor: pointer;
            align-items: flex-start;
        }

        .my-review-item:hover {
            border-color: var(--accent);
            box-shadow: 0 2px 12px rgba(155, 138, 189, 0.10);
        }

        .my-review-item .review-game-cover {
            width: 72px;
            min-height: 40px;
            flex-shrink: 0;
            border-radius: 8px;
            overflow: hidden;
            background: var(--tag-bg);
            border: 1px solid var(--border);
        }

        .my-review-item .review-game-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .my-review-item .review-game-cover .cover-placeholder {
            width: 72px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text3);
        }

        .my-review-item .review-body {
            flex: 1;
            min-width: 0;
        }

        .my-review-item .review-game-name {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--text);
            margin-bottom: 2px;
        }

        .my-review-item .review-game-name:hover {
            color: var(--accent);
        }

        .my-review-item .review-stars {
            color: var(--gold);
            font-size: 0.85rem;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .my-review-item .review-stars .score {
            font-size: 0.75rem;
            color: var(--text3);
            font-weight: 500;
        }

        .my-review-item .review-text {
            font-size: 0.85rem;
            color: var(--text2);
            word-break: break-word;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: pre-wrap;
        }

        .my-review-item .review-time {
            font-size: 0.7rem;
            color: var(--text3);
            margin-top: 4px;
            flex-shrink: 0;
            white-space: nowrap;
            padding-left: 8px;
        }

        .my-reviews-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text3);
        }

        .my-reviews-empty .empty-icon {
            font-size: 3rem;
            display: block;
            margin-bottom: 12px;
        }

        @media (max-width:600px) {
            #myReviewsModalOverlay .modal {
                padding: 20px 14px;
                max-width: 98%;
            }

            .my-review-item {
                flex-wrap: wrap;
                gap: 8px;
            }

            .my-review-item .review-game-cover {
                width: 60px;
                min-height: 34px;
            }

            .my-review-item .review-game-cover .cover-placeholder {
                width: 60px;
                height: 34px;
                font-size: 1.2rem;
            }

            .my-review-item .review-body {
                flex: 1 1 100%;
            }

            .my-review-item .review-time {
                padding-left: 0;
                width: 100%;
                text-align: right;
            }

            .my-review-item .review-stars {
                font-size: 0.75rem;
            }

            .my-review-item .review-text {
                font-size: 0.78rem;
            }
        }

        /* ================================================================
   游戏日记样式 - 独立子页面
   ================================================================ */
        .diary-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg);
            z-index: 1000;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        /* 封面视图 - 仿书皮封面 */
        .diary-cover {
            text-align: center;
            padding: 75px 60px;
            background:
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(213, 207, 224, 0.03) 2px,
                    rgba(213, 207, 224, 0.03) 4px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 2px,
                    rgba(213, 207, 224, 0.03) 2px,
                    rgba(213, 207, 224, 0.03) 4px
                ),
                linear-gradient(135deg, rgba(250, 247, 253, 0.9) 0%, rgba(246, 242, 250, 0.85) 50%, rgba(250, 247, 253, 0.9) 100%);
            border-radius: 20px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            max-width: 675px;
            margin: 80px auto;
            width: 90%;
            box-shadow:
                0 20px 60px rgba(60, 30, 80, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.5),
                inset 0 -2px 4px rgba(213, 207, 224, 0.2);
            position: relative;
            overflow: hidden;
        }

        .diary-cover::after {
            content: '';
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            bottom: 12px;
            border: 1px solid rgba(213, 207, 224, 0.30);
            border-radius: 12px;
            pointer-events: none;
            z-index: 1;
        }

        .diary-cover::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(155, 138, 189, 0.10) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(155, 138, 189, 0.06) 0%, transparent 50%);
            pointer-events: none;
            z-index: 2;
        }

        .diary-cover-icon {
            font-size: 6rem;
            margin-bottom: 18px;
            position: relative;
            z-index: 3;
        }

        .diary-cover-title {
            font-size: 2.7rem;
            font-weight: 700;
            color: #3d3546;
            margin-bottom: 30px;
            position: relative;
            z-index: 3;
        }

        .diary-cover-user {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            margin-bottom: 22px;
        }

        .diary-cover-avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: linear-gradient(135deg, #d5cfe0 0%, #c4bcd0 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.7rem;
            border: 3px solid #9b8abd;
            overflow: hidden;
        }

        .diary-cover-username {
            font-size: 1.8rem;
            font-weight: 600;
            color: #3d3546;
        }

        .diary-cover-stats {
            font-size: 1.35rem;
            color: #8c8099;
            margin-bottom: 12px;
        }

        .diary-cover-achievement {
            font-size: 1.35rem;
            color: #9b8abd;
            margin-bottom: 12px;
            font-weight: 500;
        }

        .diary-cover-slogan {
            font-size: 1.35rem;
            color: #8c8099;
            font-style: italic;
            margin-bottom: 38px;
        }

        .diary-cover-btn {
            padding: 18px 60px;
            background: linear-gradient(135deg, #9b8abd 0%, #7e6fa0 100%);
            color: #fff;
            border: none;
            border-radius: 38px;
            font-size: 1.65rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 6px 22px rgba(155, 138, 189, 0.4);
        }

        .diary-cover-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 9px 30px rgba(155, 138, 189, 0.5);
        }

        /* 收起日记按钮 - 左下角 */
        .diary-close-btn {
            position: absolute;
            bottom: 24px;
            left: 24px;
            padding: 12px 24px;
            background: rgba(155, 138, 189, 0.15);
            color: #9b8abd;
            border: 1px solid rgba(155, 138, 189, 0.30);
            border-radius: 24px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 5;
        }

        .diary-close-btn:hover {
            background: rgba(155, 138, 189, 0.25);
            color: #7e6fa0;
            border-color: rgba(155, 138, 189, 0.50);
            transform: translateY(-2px);
        }

        /* 内容视图 */
        #diaryContentView {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            padding: 12px;
            min-height: 0;
        }

        .diary-body-row {
            display: flex;
            flex: 1;
            min-height: 0;
            gap: 0;
            overflow: hidden;
        }

        #diaryContent {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* 桌面端书签丝带 */
        #diaryBookmarkRail {
            width: 140px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 14px 10px 14px 6px;
            background: rgba(243, 239, 247, 0.5);
            border-left: 1px solid rgba(213, 207, 224, 0.35);
            overflow-y: auto;
            flex-shrink: 0;
        }
        #diaryBookmarkRail::-webkit-scrollbar { width: 3px; }
        #diaryBookmarkRail::-webkit-scrollbar-thumb { background: rgba(208, 196, 216, 0.6); border-radius: 2px; }

        .diary-ribbon {
            position: relative;
            height: 44px;
            padding: 0 22px 0 14px;
            color: #fff;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
            opacity: 0.9;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(60, 30, 80, 0.2);
            white-space: nowrap;
            overflow: visible;
        }
        .diary-ribbon::before {
            content: '';
            position: absolute;
            left: 0; top: 0; right: 0; bottom: 0;
            background: linear-gradient(90deg, #b5a9cf, #c9bde0);
            box-shadow: 0 1px 4px rgba(60, 30, 80, 0.12);
            clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
            transition: all 0.2s;
            z-index: -1;
        }
        .diary-ribbon:hover { opacity: 1; transform: translateX(-4px); }
        .diary-ribbon:hover::before { box-shadow: 0 3px 10px rgba(60, 30, 80, 0.2); }
        .diary-ribbon.active {
            opacity: 1;
            transform: translateX(-8px);
            width: calc(100% + 8px);
            color: #fff;
            font-weight: 700;
            text-shadow: 0 1px 2px rgba(60, 30, 80, 0.3);
        }
        .diary-ribbon.active::before {
            background: linear-gradient(90deg, var(--accent2), var(--accent));
            box-shadow: 0 3px 12px rgba(60, 30, 80, 0.25);
        }
        .diary-ribbon .ribbon-label {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
            flex: 1;
            overflow: hidden;
            justify-content: center;
            transform: translateY(4px);
        }
        .diary-ribbon .ribbon-name {
            font-size: 0.78rem;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
        }
        .diary-ribbon .ribbon-sub {
            font-size: 0.65rem;
            opacity: 0.92;
            display: flex;
            gap: 4px;
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }
        .diary-ribbon .ribbon-tip {
            position: absolute;
            right: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%);
            background: #3d3546;
            color: #fff;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.78rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s;
            z-index: 20;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        .diary-ribbon .ribbon-tip strong { color: #f5b342; }
        .diary-ribbon:hover .ribbon-tip { opacity: 1; }
        .diary-ribbon .ribbon-tip::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-right-color: #3d3546;
        }

        /* 移动端书签按钮 */
        .diary-mobile-bm-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 8px;
            background: rgba(250, 247, 253, 0.9);
            font-size: 0.82rem;
            color: var(--text2);
            cursor: pointer;
        }

        /* 移动端书签下拉面板 */
        .diary-mobile-dropdown {
            background: #fff;
            border-bottom: 1px solid rgba(213, 207, 224, 0.35);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            max-height: 50vh;
            overflow-y: auto;
            z-index: 30;
        }
        .diary-mobile-search { padding: 8px 14px; border-bottom: 1px solid rgba(213, 207, 224, 0.25); }
        .diary-mobile-search input {
            width: 100%;
            padding: 7px 12px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 8px;
            font-size: 0.8rem;
            background: var(--bg);
        }
        .diary-mobile-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid rgba(213, 207, 224, 0.2);
        }
        .diary-mobile-item:hover { background: var(--bg); }
        .diary-mobile-item.active { background: rgba(155, 138, 189, 0.12); }
        .diary-mobile-idx {
            width: 22px; height: 22px;
            border-radius: 5px;
            background: rgba(213, 207, 224, 0.3);
            color: var(--text3);
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 600;
        }
        .diary-mobile-item.active .diary-mobile-idx { background: var(--accent); color: #fff; }
        .diary-mobile-item-name { flex: 1; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .diary-mobile-item-score { color: #f5b342; font-size: 0.76rem; font-weight: 600; }

        /* 工具栏 */
        .diary-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1100px;
            margin-bottom: 8px;
            flex-shrink: 0;
        }

        .diary-back-btn {
            padding: 6px 14px;
            background: rgba(250, 247, 253, 0.82);
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 8px;
            color: #3d3546;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .diary-back-btn:hover {
            background: rgba(237, 231, 242, 0.50);
            border-color: #9b8abd;
        }

        .diary-sort-select {
            padding: 6px 14px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 8px;
            background: rgba(250, 247, 253, 0.82);
            color: #3d3546;
            font-size: 0.85rem;
            cursor: pointer;
        }

        /* 日记展开 - 桌面端左右分栏 */
        /* 日记翻页动画 */
        .diary-flip-out {
            animation: diaryFlipOut 0.4s ease forwards;
        }

        .diary-flip-in {
            animation: diaryFlipIn 0.4s ease forwards;
        }

        .diary-flip-out-prev {
            animation: diaryFlipOutPrev 0.4s ease forwards;
        }

        .diary-flip-in-prev {
            animation: diaryFlipInPrev 0.4s ease forwards;
        }

        .diary-slide-out-left {
            animation: diarySlideOutLeft 0.35s ease forwards;
        }

        .diary-slide-in-right {
            animation: diarySlideInRight 0.35s ease forwards;
        }

        .diary-slide-in-left {
            animation: diarySlideInLeft 0.35s ease forwards;
        }

        .diary-slide-out-right {
            animation: diarySlideOutRight 0.35s ease forwards;
        }

        @keyframes diaryFlipOut {
            0% { transform: perspective(1500px) rotateY(0deg); opacity: 1; }
            100% { transform: perspective(1500px) rotateY(-15deg); opacity: 0; }
        }

        @keyframes diaryFlipIn {
            0% { transform: perspective(1500px) rotateY(15deg); opacity: 0; }
            100% { transform: perspective(1500px) rotateY(0deg); opacity: 1; }
        }

        @keyframes diaryFlipOutPrev {
            0% { transform: perspective(1500px) rotateY(0deg); opacity: 1; }
            100% { transform: perspective(1500px) rotateY(15deg); opacity: 0; }
        }

        @keyframes diaryFlipInPrev {
            0% { transform: perspective(1500px) rotateY(-15deg); opacity: 0; }
            100% { transform: perspective(1500px) rotateY(0deg); opacity: 1; }
        }

        @keyframes diarySlideOutLeft {
            0% { transform: translateX(0); opacity: 1; }
            100% { transform: translateX(-30px); opacity: 0; }
        }

        @keyframes diarySlideInRight {
            0% { transform: translateX(30px); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }

        @keyframes diarySlideInLeft {
            0% { transform: translateX(-30px); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }

        @keyframes diarySlideOutRight {
            0% { transform: translateX(0); opacity: 1; }
            100% { transform: translateX(30px); opacity: 0; }
        }

        .diary-entry-wrapper {
            width: 100%;
            max-width: 1400px;
            transform-origin: center center;
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .diary-spread {
            display: flex;
            gap: 0;
            width: 100%;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            filter: drop-shadow(0 16px 64px rgba(60, 30, 80, 0.25));
        }

        /* 左页 - 游戏信息 */
        .diary-page-left {
            flex: 1;
            background: rgba(250, 247, 253, 0.82);
            border-radius: 20px 0 0 20px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-right: none;
            padding: 20px 25px;
            position: relative;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(155, 138, 189, 0.25) transparent;
        }

        .diary-page-left::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 30px;
            background: linear-gradient(90deg, rgba(60, 30, 80, 0.08) 0%, transparent 100%);
            border-radius: 20px 0 0 20px;
        }

        /* 右页 - 评论内容（翻书动画用） */
        .diary-page-right {
            flex: 1;
            background: rgba(250, 247, 253, 0.82);
            border-radius: 0 20px 20px 0;
            border: 1px solid rgba(213, 207, 224, 0.35);
            padding: 20px 25px;
            position: relative;
            overflow: hidden;
            min-height: 0;
            transform-origin: left center;
            backface-visibility: hidden;
            transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        /* 翻书动画 - 右页翻出（下一页） */
        .diary-page-right.turn-out-next {
            animation: diaryTurnOutNext 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
        }

        /* 翻书动画 - 右页翻入（下一页） */
        .diary-page-right.turn-in-next {
            animation: diaryTurnInNext 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
        }

        /* 翻书动画 - 右页翻出（上一页） */
        .diary-page-right.turn-out-prev {
            animation: diaryTurnOutPrev 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
        }

        /* 翻书动画 - 右页翻入（上一页） */
        .diary-page-right.turn-in-prev {
            animation: diaryTurnInPrev 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
        }

        @keyframes diaryTurnOutNext {
            0% { transform: perspective(1500px) rotateY(0deg); }
            100% { transform: perspective(1500px) rotateY(-180deg); }
        }

        @keyframes diaryTurnInNext {
            0% { transform: perspective(1500px) rotateY(180deg); }
            100% { transform: perspective(1500px) rotateY(0deg); }
        }

        @keyframes diaryTurnOutPrev {
            0% { transform: perspective(1500px) rotateY(0deg); }
            100% { transform: perspective(1500px) rotateY(180deg); }
        }

        @keyframes diaryTurnInPrev {
            0% { transform: perspective(1500px) rotateY(-180deg); }
            100% { transform: perspective(1500px) rotateY(0deg); }
        }

        /* 自然翻书 - 翻页层（双面纸张） */
        .diary-flip-sheet {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            transform-style: preserve-3d;
            transform-origin: left center;
            transition: transform 0.9s cubic-bezier(0.32, 0.62, 0.2, 1);
            z-index: 5;
            display: none;
        }
        .diary-flip-sheet.active { display: block; }
        .diary-flip-sheet.flipping { transform: rotateY(-180deg); }
        .diary-flip-sheet.flipping-back { transform: rotateY(0deg); }
        .diary-flip-sheet .flip-face {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            background: rgba(250, 247, 253, 0.82);
            border: 1px solid rgba(213, 207, 224, 0.35);
            padding: 20px 25px;
            overflow: hidden;
            border-radius: 0 20px 20px 0;
        }
        .diary-flip-sheet .flip-face-front {
            box-shadow: inset 10px 0 20px -10px rgba(60, 30, 80, 0.18);
        }
        .diary-flip-sheet .flip-face-back {
            transform: rotateY(180deg);
            border-radius: 20px 0 0 20px;
            box-shadow: inset -10px 0 20px -10px rgba(60, 30, 80, 0.18);
        }
        /* 翻页动态阴影 */
        .diary-flip-sheet .flip-face::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(60, 30, 80, 0) 0%, rgba(60, 30, 80, 0) 100%);
            transition: background 0.9s cubic-bezier(0.32, 0.62, 0.2, 1);
        }
        .diary-flip-sheet.flipping .flip-face-front::after {
            background: linear-gradient(90deg, rgba(60, 30, 80, 0.35) 0%, rgba(60, 30, 80, 0.1) 40%, rgba(60, 30, 80, 0) 100%);
        }
        .diary-flip-sheet.flipping .flip-face-back::after {
            background: linear-gradient(90deg, rgba(60, 30, 80, 0) 0%, rgba(60, 30, 80, 0.1) 60%, rgba(60, 30, 80, 0.35) 100%);
        }
        .diary-flip-sheet.flipping-back .flip-face-front::after {
            background: linear-gradient(90deg, rgba(60, 30, 80, 0) 0%, rgba(60, 30, 80, 0.1) 60%, rgba(60, 30, 80, 0.35) 100%);
        }
        .diary-flip-sheet.flipping-back .flip-face-back::after {
            background: linear-gradient(90deg, rgba(60, 30, 80, 0.35) 0%, rgba(60, 30, 80, 0.1) 40%, rgba(60, 30, 80, 0) 100%);
        }
        /* 投射阴影（翻页时投在左页上） */
        .diary-cast-shadow {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            z-index: 4;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.9s ease;
            background: linear-gradient(90deg, rgba(60, 30, 80, 0.35) 0%, rgba(60, 30, 80, 0) 100%);
            border-radius: 20px 0 0 20px;
            display: none;
        }
        .diary-cast-shadow.active { display: block; }
        .diary-cast-shadow.show { opacity: 1; }
        /* 书脊高光 */
        .diary-spine-highlight {
            position: absolute;
            left: 50%;
            top: 0;
            width: 24px;
            height: 100%;
            transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, rgba(60, 30, 80, 0.18) 45%, rgba(60, 30, 80, 0.25) 50%, rgba(60, 30, 80, 0.18) 55%, transparent);
            z-index: 1;
            pointer-events: none;
            display: block;
        }

        .diary-page-right::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 30px;
            background: linear-gradient(-90deg, rgba(60, 30, 80, 0.08) 0%, transparent 100%);
            border-radius: 0 20px 20px 0;
        }

        /* texture-card 美化 - 左页：光泽叠层 */
        .diary-page-left.texture-card::before {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 35%),
                radial-gradient(ellipse at 10% 5%, rgba(255,255,255,0.12) 0%, transparent 35%),
                radial-gradient(ellipse at 15% 10%, rgba(155,138,189,0.08) 0%, transparent 50%);
        }

        /* texture-card 美化 - 右页：光泽叠层（无中心折痕） */
        .diary-page-right.texture-card::before {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 35%),
                radial-gradient(ellipse at 90% 5%, rgba(255,255,255,0.12) 0%, transparent 35%),
                radial-gradient(ellipse at 85% 10%, rgba(155,138,189,0.08) 0%, transparent 50%);
        }

        /* 左页右侧内阴影（仅左页，靠近中缝处） */
        .diary-page-left.texture-card::after {
            content: '';
            position: absolute;
            right: 0; top: 0; bottom: 0;
            width: 12px;
            pointer-events: none;
            border-radius: inherit;
            box-shadow: inset -4px 0 8px -2px rgba(60, 30, 80, 0.10);
            z-index: 2;
        }

        /* 右页无内阴影，避免覆盖内容 */
        .diary-page-right.texture-card::after {
            display: none;
        }

        [data-theme="dark"] .diary-page-left.texture-card::before {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 35%),
                radial-gradient(ellipse at 10% 5%, rgba(255,255,255,0.04) 0%, transparent 35%),
                radial-gradient(ellipse at 15% 10%, rgba(155,138,189,0.05) 0%, transparent 50%);
        }

        [data-theme="dark"] .diary-page-right.texture-card::before {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 35%),
                radial-gradient(ellipse at 90% 5%, rgba(255,255,255,0.04) 0%, transparent 35%),
                radial-gradient(ellipse at 85% 10%, rgba(155,138,189,0.05) 0%, transparent 50%);
        }

        [data-theme="dark"] .diary-page-left.texture-card::after {
            box-shadow: inset -4px 0 8px -2px rgba(0, 0, 0, 0.3);
        }

        /* 页面头部 */
        .page-header {
            text-align: center;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(213, 207, 224, 0.35);
        }

        .page-brand {
            font-size: 0.85rem;
            color: #9b8abd;
            margin-bottom: 5px;
            font-weight: 500;
            letter-spacing: 1px;
        }

        .page-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #3d3546;
        }

        /* 左页内容 */
        .game-cover {
            width: 100%;
            max-width: 240px;
            margin: 0 auto 14px;
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid rgba(213, 207, 224, 0.35);
            box-shadow: 0 8px 32px rgba(60, 30, 80, 0.18);
        }

        .game-cover img {
            width: 100%;
            height: auto;
            display: block;
        }

        .game-cover-placeholder {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, rgba(213, 207, 224, 0.30) 0%, rgba(213, 207, 224, 0.50) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

        .game-name {
            font-size: 1.4rem;
            font-weight: 700;
            color: #3d3546;
            text-align: center;
            margin-bottom: 10px;
        }

        .game-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 10px;
        }

        .tag {
            padding: 4px 10px;
            background: rgba(237, 231, 242, 0.50);
            border-radius: 15px;
            font-size: 0.75rem;
            color: #5a4e66;
            border: 1px solid rgba(213, 207, 224, 0.35);
        }

        .game-info-item {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px dotted rgba(213, 207, 224, 0.35);
            font-size: 0.85rem;
        }

        .game-info-label {
            color: #8c8099;
            font-weight: 500;
        }

        .game-info-value {
            color: #3d3546;
        }

        .game-description {
            margin-top: 10px;
            padding: 8px 10px;
            background: rgba(246, 242, 250, 0.60);
            border-radius: 8px;
            border-left: 3px solid #9b8abd;
            font-size: 0.8rem;
            line-height: 1.5;
            color: #665c72;
        }

        .game-screenshots {
            margin-top: 12px;
        }

        .screenshots-title {
            font-size: 0.9rem;
            color: #9b8abd;
            margin-bottom: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .screenshots-scroll {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 12px;
            scrollbar-width: thin;
            scrollbar-color: rgba(155, 138, 189, 0.3) transparent;
        }

        .screenshots-scroll::-webkit-scrollbar {
            height: 6px;
        }

        .screenshots-scroll::-webkit-scrollbar-thumb {
            background: rgba(155, 138, 189, 0.3);
            border-radius: 3px;
        }

        .screenshots-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(155, 138, 189, 0.5);
        }

        .screenshot-thumb {
            width: 100px;
            height: 70px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid rgba(213, 207, 224, 0.35);
            transition: transform 0.2s;
        }

        .screenshot-thumb:hover {
            transform: scale(1.05);
        }

        .screenshot-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* GIF截图 - 固定宽度，保持原始比例 */
        .screenshot-thumb.gif-thumb {
            width: 100px;
            height: 70px;
            overflow: hidden;
        }

        .screenshot-thumb.gif-thumb img.gif-screenshot {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: rgba(246, 242, 250, 0.5);
        }

        /* 右页内容 */
        .diary-page-right .review-section {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .review-rating {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(213, 207, 224, 0.35);
        }

        .rating-label {
            font-size: 0.9rem;
            color: #8c8099;
            margin-bottom: 0;
        }

        .rating-stars {
            font-size: 1.5rem;
            color: #f5a623;
            letter-spacing: 3px;
        }

        .rating-score {
            font-size: 1.1rem;
            color: #3d3546;
            margin-left: 0;
        }

        .review-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 文本格式化工具栏 */
        .review-label {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.95rem;
            color: #3d3546;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .toolbar-toggle-btn {
            background: none;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 6px;
            padding: 2px 8px;
            font-size: 0.8rem;
            cursor: pointer;
            color: #3d3546;
            transition: all 0.2s;
            line-height: 1;
        }

        .toolbar-toggle-btn:hover {
            background: rgba(237, 231, 242, 0.50);
            border-color: #9b8abd;
        }

        .toolbar-toggle-btn.active {
            background: #9b8abd;
            color: #fff;
            border-color: #9b8abd;
        }

        .text-format-toolbar {
            display: flex;
            gap: 5px;
            margin-bottom: 6px;
            padding: 6px;
            background: rgba(246, 242, 250, 0.60);
            border-radius: 8px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
            max-height: 200px;
            opacity: 1;
            overflow: hidden;
        }

        .text-format-toolbar.collapsed {
            max-height: 0;
            opacity: 0;
            margin-bottom: 0;
            padding: 0 6px;
            border-color: transparent;
            pointer-events: none;
        }

        .format-btn {
            width: 32px;
            height: 32px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            background: rgba(250, 247, 253, 0.82);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            color: #3d3546;
            transition: all 0.2s;
        }

        .format-btn:hover {
            background: rgba(237, 231, 242, 0.50);
            border-color: #9b8abd;
        }

        .format-btn.active {
            background: #9b8abd;
            color: #fff;
            border-color: #9b8abd;
        }

        .toolbar-divider {
            width: 1px;
            height: 20px;
            background: rgba(213, 207, 224, 0.50);
            margin: 0 2px;
            align-self: center;
            flex-shrink: 0;
        }

        .align-icon {
            font-size: 0.9rem;
            line-height: 1;
            display: inline-block;
        }

        .align-icon.center {
            text-align: center;
            display: block;
        }

        .align-icon.right {
            text-align: right;
            display: block;
        }

        .font-size-select {
            padding: 6px 10px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 6px;
            background: rgba(250, 247, 253, 0.82);
            color: #3d3546;
            font-size: 0.85rem;
            cursor: pointer;
        }

        .review-text {
            flex: 1;
            padding: 12px;
            background: rgba(246, 242, 250, 0.60);
            border-radius: 8px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            font-size: 0.9rem;
            line-height: 1.7;
            color: #3d3546;
            min-height: 80px;
            max-height: 320px;
            overflow-y: auto;
            outline: none;
            white-space: pre-wrap;
        }

        .review-text:focus {
            border-color: #9b8abd;
        }

        .review-meta {
            margin-bottom: 8px;
            padding: 6px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            border-top: 1px solid rgba(213, 207, 224, 0.35);
            border-bottom: 1px solid rgba(213, 207, 224, 0.35);
        }

        .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            white-space: nowrap;
        }

        .meta-icon { color: #9b8abd; flex-shrink: 0; }
        .meta-label { color: #8c8099; flex-shrink: 0; }
        .meta-value { color: #3d3546; }

        .meta-item input[type="date"] {
            padding: 3px 6px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            border-radius: 6px;
            background: rgba(250, 247, 253, 0.82);
            color: #3d3546;
            font-size: 0.8rem;
            font-family: inherit;
            width: 130px;
        }

        .review-actions {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .action-btn {
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            background: rgba(250, 247, 253, 0.82);
            color: #3d3546;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background: rgba(237, 231, 242, 0.50);
            border-color: #9b8abd;
        }

        .action-btn.primary {
            background: #9b8abd;
            color: #fff;
            border-color: #9b8abd;
        }

        .action-btn.primary:hover { background: #7e6fa0; }

        .action-btn.danger {
            color: #c0392b;
            border-color: rgba(192, 57, 43, 0.30);
        }

        .action-btn.danger:hover {
            background: rgba(192, 57, 43, 0.06);
            border-color: #c0392b;
        }

        .diary-save-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .diary-save-btn[disabled] {
            background: rgba(155, 138, 189, 0.5);
            color: #fff;
            border-color: rgba(155, 138, 189, 0.5);
        }

        /* 底部操作栏 */
        .diary-bottom-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 20px;
            margin-top: 8px;
            background: rgba(250, 247, 253, 0.82);
            border-radius: 12px;
            border: 1px solid rgba(213, 207, 224, 0.35);
            flex-shrink: 0;
        }

        .diary-bottom-actions {
            display: flex;
            gap: 10px;
        }

        .diary-page-nav-inline {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 翻页导航按钮 */
        .diary-page-nav-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(213, 207, 224, 0.35);
            background: rgba(250, 247, 253, 0.82);
            color: #3d3546;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .diary-page-nav-btn:hover:not(:disabled) {
            background: #9b8abd;
            color: #fff;
            border-color: #9b8abd;
        }

        .diary-page-nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .diary-page-info {
            font-size: 0.85rem;
            color: #3d3546;
            min-width: 50px;
            text-align: center;
            font-weight: 500;
        }

        /* 空状态 */
        .diary-empty {
            text-align: center;
            padding: 60px 20px;
            color: #8c8099;
        }

        .diary-empty .empty-icon {
            font-size: 4rem;
            display: block;
            margin-bottom: 15px;
        }

        /* 导出模式 */
        .diary-entry-wrapper.export-mode .text-format-toolbar,
        .diary-entry-wrapper.export-mode .diary-bottom-bar {
            display: none !important;
        }

        .diary-entry-wrapper.export-mode .review-text {
            min-height: auto;
        }

        /* 导出进度遮罩 */
        .diary-export-overlay {
            position: fixed;
            inset: 0;
            z-index: 2200;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .diary-export-overlay.show { display: flex; }
        .diary-export-overlay-box {
            background: var(--glass-bg-light);
            border-radius: 16px;
            border: 1px solid var(--border);
            padding: 40px;
            text-align: center;
            color: var(--text3);
            box-shadow: var(--shadow-lg);
            max-width: 320px;
            width: 100%;
        }
        .diary-export-overlay-box .export-progress-text {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 16px;
        }
        .diary-export-overlay-box .export-progress-track {
            width: 180px;
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden;
            margin: 0 auto;
        }
        .diary-export-overlay-box .export-progress-bar {
            width: 0%;
            height: 100%;
            background: var(--accent);
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .modal-close {
            display: none !important;
        }

        /* ================================================================
   移动端适配 (补充)
   ================================================================ */
        @media (max-width:768px) {
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            /* 系列作品视图移动端适配 */
            .series-group-title {
                font-size: 1rem;
            }
            .series-group-badge {
                font-size: 0.68rem;
            }
            .series-group-cards {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }
            .series-group-cards .gallery-card {
                flex: none;
                width: auto;
                border-radius: 16px;
                display: flex;
                flex-direction: column;
            }
            .series-group-cards .gallery-card .card-cover-wrap {
                aspect-ratio: 16/7;
            }
            .series-group-cards .gallery-card .card-body {
                padding: 6px 10px 4px;
                gap: 2px;
                flex: 1;
                overflow: hidden;
            }
            .series-group-cards .gallery-card .card-title {
                font-size: .8rem;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .series-group-cards .gallery-card .card-desc {
                font-size: .65rem;
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .series-group-cards .gallery-card .card-meta {
                gap: 2px;
                margin-top: 1px;
            }
            .series-group-cards .gallery-card .card-meta span {
                font-size: .52rem;
                padding: 1px 4px;
            }
            /* 平板端：系列作品卡片按钮同行排列 */
            .series-group-cards .gallery-card .card-user-actions {
                flex-wrap: nowrap;
                padding: 4px 6px 6px;
                gap: 3px;
            }
            .series-group-cards .gallery-card .card-user-actions .action-btn {
                flex: 1 1 0;
                min-width: 0;
                justify-content: center;
                padding: 3px 4px;
                font-size: .56rem;
                gap: 1px;
            }
            .series-group-cards .gallery-card .card-user-actions .action-btn .action-label {
                white-space: nowrap;
                margin-left: 0;
            }
            .series-group-cards .gallery-card .card-user-actions .action-btn .icon {
                font-size: .7rem;
            }
            .series-group-cards .gallery-card .card-heroine-tag {
                font-size: 0.55rem;
                padding: 1px 8px;
                top: 4px;
                left: 4px;
            }
            /* 平板端：未发售游戏卡片，单个愿望单按钮靠右对齐 */
            .gallery-card .card-user-actions.only-wish {
                justify-content: flex-end;
            }
            .gallery-card .card-user-actions.only-wish .action-btn {
                flex: 0 0 auto;
            }
            .series-group-cards .gallery-card .card-user-actions.only-wish {
                justify-content: flex-end;
            }
            .series-group-cards .gallery-card .card-user-actions.only-wish .action-btn {
                flex: 0 0 auto;
            }

            .filter-sticky {
                padding: 10px 8px 8px;
            }

            .filter-header {
                flex-wrap: wrap;
                gap: 6px;
                min-height: auto;
                padding: 4px 0;
            }

            .site-logo {
                font-size: 1.1rem;
                margin-right: 4px;
            }

            .top-nav {
                order: 3;
                flex: 1 1 100%;
                flex-wrap: wrap;
                justify-content: center;
                gap: 2px;
                margin-top: 4px;
            }

            .top-nav-item {
                padding: 5px 10px;
                font-size: 0.78rem;
            }

            .header-right {
                margin-left: auto;
                flex-shrink: 0;
            }

            /* 移动端：通知面板改为固定全宽下拉，绝不超出屏幕 */
            .notif-panel {
                position: fixed;
                top: 56px;
                left: 8px;
                right: 8px;
                width: auto;
                max-width: none;
                max-height: calc(100vh - 72px);
            }
            .notif-panel .notif-list {
                max-height: calc(100vh - 130px);
            }

            .header-action-link {
                padding: 4px 8px;
                font-size: 0.75rem;
            }

            .top-nav-user-btn {
                padding: 5px 8px;
                font-size: 0.78rem;
            }

            .site-title-section {
                padding: 8px 0 4px;
            }

            .site-title-section .site-title {
                font-size: 1.2rem;
            }

            .site-title-section .site-subtitle {
                font-size: 0.72rem;
            }

            .view-tab {
                padding: 6px 14px;
                font-size: .78rem;
            }

            .search-row {
                padding: 0 2px;
                max-width: 100%;
            }

            .search-row .search-input-wrap {
                padding: 0 10px;
            }

            .search-row .search-input-wrap input {
                font-size: .82rem;
                padding: 8px 2px 8px 0;
            }

            .filter-cat-btn {
                padding: 5px 10px;
                font-size: .72rem;
            }

            .filter-options-panel {
                max-height: 150px;
                padding: 8px 10px;
            }

            .filter-option-tag {
                font-size: .7rem;
                padding: 4px 8px;
            }

            .watermark {
                margin-right: 4px;
                font-size: 0.65rem;
            }

            .coin-tip-btn {
                width: 36px;
                height: 36px;
                font-size: 1.2rem;
                padding: 4px 6px;
            }

            .toolbar {
                padding: 8px 10px;
                gap: 6px;
            }

            .btn {
                padding: 5px 10px;
                font-size: .7rem;
            }

            .btn-sm {
                padding: 3px 8px;
                font-size: .65rem;
            }

            .theme-toggle {
                font-size: 1.1rem;
                padding: 4px 8px;
            }

            .theme-toggle-floating {
                bottom: 76px;
                right: 16px;
                width: 42px;
                height: 42px;
            }

            .theme-toggle-icon {
                font-size: 1.1rem;
            }

            .result-count {
                font-size: .7rem;
            }

            .sort-btn {
                padding: 4px 8px;
                font-size: .65rem;
            }

            .sort-btn-group {
                border-radius: 10px;
            }

            /* 移动端：下拉排序（方案A）适配 */
            .sort-select-wrapper {
                min-width: 110px;
                border-radius: 10px;
                border-width: 1.2px;
            }
            .sort-select-prefix { width: 22px; font-size: .75rem; }
            .sort-select-arrow  { width: 18px; font-size: .68rem; }
            .sort-select        { padding: 4px 2px 4px 5px; font-size: .65rem; }

            .sync-status {
                font-size: 0.55rem;
                padding: 1px 6px;
            }

            .bg-glow.g1 {
                width: 250px;
                height: 250px;
                top: -80px;
                left: -60px;
            }

            .bg-glow.g2 {
                width: 200px;
                height: 200px;
                bottom: -60px;
                right: -40px;
            }

            .bg-glow.g3 {
                width: 180px;
                height: 180px;
            }

            .gallery-card {
                border-radius: 16px;
                display: flex;
                flex-direction: column;
            }

            .gallery-card .card-cover-wrap {
                aspect-ratio: 16/7;
            }

            .gallery-card .card-cover {
                object-fit: cover;
            }

            .gallery-card .card-body {
                padding: 6px 10px 4px;
                gap: 2px;
                flex: 1;
                overflow: hidden;
            }

            .gallery-card .card-title {
                font-size: .8rem;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .gallery-card .card-desc {
                font-size: .65rem;
                line-height: 1.3;
                /* 恢复第一次修改后的状态：移动端简介只展示 2 行 */
                -webkit-line-clamp: 2;
            }

            .gallery-card .card-meta {
                gap: 2px;
                margin-top: 1px;
            }

            .gallery-card .card-meta span {
                font-size: .52rem;
                padding: 1px 4px;
            }

            .gallery-card .card-user-actions {
                padding: 4px 8px 6px;
                gap: 4px;
                border-top: 1px solid var(--border);
                /* 手机端：保持吸底，按钮与 meta 之间无视觉空隙，跨卡片按钮严格对齐 */
                margin-top: auto;
                justify-content: flex-end;
                /* 手机端：强制同一行，避免恢复文字后两个按钮上下堆叠 */
                flex-wrap: nowrap;
                flex-shrink: 0;
            }

            .gallery-card .card-user-actions .action-btn {
                /* 手机端：按钮平均占空间，内容可缩小也不换行 */
                padding: 3px 5px;
                line-height: 1;
                flex: 1 1 0;
                min-width: 0;
                justify-content: center;
                gap: 1px;
            }

            .gallery-card .card-user-actions .action-btn .icon {
                font-size: .72rem;
                display: inline-flex;
            }

            /* 手机端：恢复文字显示，但使用更小字号以明确语义 */
            .gallery-card .card-user-actions .action-btn .action-label {
                display: inline;
                font-size: .5rem;
                font-weight: 500;
                white-space: nowrap;
                margin-left: 0;
            }

            .gallery-card .card-heroine-tag {
                font-size: 0.55rem;
                padding: 1px 8px;
                top: 4px;
                left: 4px;
            }

            .gallery-card .card-rating-count {
                font-size: .58rem;
                padding: 0 10px 4px;
            }

            .btn-random {
                padding: 4px 10px;
                font-size: .7rem;
            }

            .btn-wishlist {
                padding: 4px 8px;
                font-size: .65rem;
            }

            .btn-achievement {
                padding: 4px 8px;
                font-size: .65rem;
            }

            #achievementModalOverlay .modal {
                max-width: 95%;
                margin: 10px auto;
            }

            .achievement-item {
                padding: 10px 12px;
                gap: 10px;
            }

            .achievement-item .ach-icon {
                font-size: 1.4rem;
                width: 34px;
            }

            #authModalOverlay .modal {
                max-width: 95%;
                padding: 20px 16px;
            }

            .profile-avatar-wrapper {
                width: 80px;
                height: 80px;
            }

            .user-menu-wrapper .user-name {
                max-width: 50px;
                font-size: 0.75rem;
            }

            .user-menu-wrapper {
                padding: 2px 10px 2px 6px;
                height: 34px;
            }

            .user-menu-wrapper .user-avatar {
                width: 24px;
                height: 24px;
            }

            .login-btn-header {
                padding: 4px 12px;
                font-size: 0.75rem;
                height: 34px;
            }

            #profileModalOverlay .modal {
                max-width: 95%;
                padding: 20px 16px;
            }

            #userDropdownMenu {
                min-width: 150px;
                right: -4px;
                z-index: 99999 !important;
            }

            .achievement-tab-btn {
                flex: 1 1 0;
                min-width: 0;
                padding: 8px 12px;
                font-size: 0.85rem;
            }

            .star-rating {
                font-size: 1.3rem;
                gap: 1px;
            }

            .comment-item .comment-time {
                font-size: 0.6rem;
            }

            .review-section-title {
                font-size: 0.9rem;
            }

            .comment-item .comment-name {
                font-size: 0.78rem;
            }

            .comment-item .comment-stars {
                font-size: 0.8rem;
            }

            .comment-item .comment-text {
                font-size: 0.78rem;
                white-space: pre-wrap;
            }

            .comment-item .comment-time {
                font-size: 0.6rem;
            }

            .comment-input {
                font-size: 0.8rem;
                min-height: 50px;
                padding: 6px 10px;
            }

            .comment-char-count {
                font-size: 0.65rem;
            }

            .review-user-area .star-rating {
                font-size: 1.2rem !important;
            }

            .review-stats {
                font-size: 0.8rem;
            }

            .review-community-header {
                font-size: 0.85rem;
            }

            .review-user-area {
                padding: 10px;
            }

            .comment-item {
                padding: 8px 10px;
            }

            .comment-item .comment-header {
                gap: 5px;
            }

            .comment-item .comment-avatar {
                width: 24px;
                height: 24px;
            }

            .btn-sm {
                font-size: 0.65rem;
                padding: 3px 8px;
            }

            #ratingStarsContainer .star {
                font-size: 1.2rem !important;
            }

            .star-rating[style*="font-size:1.4rem;"] {
                font-size: 1.2rem !important;
            }

            /* 游戏日记移动端适配 - 游戏信息在上，我的评价在下 */
            #diaryContent {
                overflow-y: auto;
            }

            /* 移动端：隐藏桌面端书签丝带，显示移动端书签按钮 */
            #diaryBookmarkRail {
                display: none !important;
            }
            .diary-mobile-bm-btn {
                display: flex !important;
            }

            .diary-body-row {
                flex-direction: column;
            }

            /* 移动端：隐藏翻页特效相关元素（移动端无需翻页动效） */
            .diary-flip-sheet,
            .diary-cast-shadow,
            .diary-spine-highlight {
                display: none !important;
            }

            .diary-entry-wrapper {
                padding: 0;
            }

            .diary-spread {
                flex-direction: column;
                border-radius: 20px;
                min-height: auto;
                overflow: visible;
            }

            /* 隐藏桌面端页面标题 - 移动端用紧凑版 */
            .page-header {
                text-align: center;
                margin-bottom: 10px;
                padding-bottom: 8px;
                border-bottom: 1px solid rgba(213, 207, 224, 0.35);
            }

            .page-brand {
                font-size: 0.7rem;
                margin-bottom: 2px;
            }

            .page-title {
                font-size: 0.9rem;
            }

            .diary-page-left,
            .diary-page-right {
                padding: 10px 15px;
                min-height: auto;
                border-radius: 0;
                border-left: 1px solid rgba(213, 207, 224, 0.35) !important;
                border-right: 1px solid rgba(213, 207, 224, 0.35) !important;
            }

            .diary-page-left::before,
            .diary-page-right::before {
                display: none;
            }

            /* 游戏信息在上 */
            .diary-page-left {
                border-top: none !important;
                border-bottom: 6px solid rgba(213, 207, 224, 0.20) !important;
                border-radius: 20px 20px 0 0 !important;
                padding: 15px 20px !important;
                overflow: visible;
            }

            /* 我的评价在下 */
            .diary-page-right {
                border-top: none !important;
                border-radius: 0 0 20px 20px !important;
            }

            /* 评分区域 - 缩小单行显示 */
            .review-rating {
                gap: 12px;
                margin-bottom: 8px;
                padding: 4px 8px;
                background: rgba(246, 242, 250, 0.60);
                border-radius: 6px;
                border: 1px solid rgba(213, 207, 224, 0.35);
                justify-content: center;
            }

            .rating-label {
                font-size: 0.65rem;
            }

            .rating-stars {
                font-size: 0.9rem;
                letter-spacing: 1px;
            }

            .rating-score {
                font-size: 0.7rem;
            }

            /* 工具栏缩小 */
            .text-format-toolbar {
                gap: 4px;
                margin-bottom: 6px;
                padding: 4px;
            }

            .format-btn {
                width: 28px;
                height: 28px;
                border-radius: 5px;
                font-size: 0.75rem;
            }

            .toolbar-divider {
                height: 16px;
                margin: 0 1px;
            }

            .align-icon {
                font-size: 0.8rem;
            }

            .toolbar-toggle-btn {
                padding: 1px 6px;
                font-size: 0.7rem;
            }

            .font-size-select {
                padding: 4px 8px;
                border-radius: 5px;
                font-size: 0.7rem;
                flex: 1;
                min-width: 60px;
            }

            .review-text {
                min-height: 200px;
                padding: 10px;
                font-size: 0.85rem;
                line-height: 1.6;
                white-space: pre-wrap;
            }

            /* 评论时间 - 紧凑flex */
            .review-meta {
                margin-bottom: 8px;
                padding: 6px 0;
                border-top: 1px solid rgba(213, 207, 224, 0.35);
                border-bottom: 1px solid rgba(213, 207, 224, 0.35);
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .meta-item {
                font-size: 0.7rem;
                gap: 4px;
                margin-bottom: 0;
            }

            .meta-item input[type="date"] {
                max-width: 130px;
                font-size: 0.7rem;
                padding: 2px 6px;
            }

            /* 游戏信息区 */
            .game-cover {
                max-width: 100%;
                border-radius: 10px;
            }

            .game-cover-placeholder {
                height: 140px;
                font-size: 2.5rem;
            }

            .game-name {
                font-size: 1.1rem;
                margin-bottom: 10px;
            }

            .game-tags {
                gap: 6px;
                margin-bottom: 10px;
            }

            .tag {
                padding: 3px 8px;
                border-radius: 12px;
                font-size: 0.65rem;
            }

            /* 游戏信息 - 2列网格 */
            .game-info {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
                margin-bottom: 10px;
                overflow: visible;
                height: auto;
                max-height: none;
            }

            .game-info-item {
                padding: 6px;
                background: rgba(246, 242, 250, 0.60);
                border-radius: 6px;
                border: 1px solid rgba(213, 207, 224, 0.35);
                flex-direction: column;
                gap: 2px;
                font-size: 0.75rem;
                overflow: visible;
                height: auto;
                max-height: none;
            }

            .game-info-label {
                font-size: 0.65rem;
            }

            .game-info-value {
                font-size: 0.75rem;
                font-weight: 500;
            }

            .game-description {
                font-size: 0.8rem;
                line-height: 1.5;
                padding: 10px;
                margin-bottom: 10px;
            }

            /* 截图缩小 */
            .screenshot-thumb {
                width: 60px;
                height: 40px;
            }

            .screenshot-thumb.gif-thumb {
                width: 60px;
                height: 40px;
                overflow: hidden;
            }

            .screenshot-thumb.gif-thumb img.gif-screenshot {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .screenshots-title {
                font-size: 0.8rem;
                margin-bottom: 6px;
            }

            /* 游戏日记封面移动端适配 */
            .diary-cover {
                padding: 35px 25px;
                margin: 20px auto;
                max-width: 92%;
                width: 92%;
            }

            .diary-cover::after {
                top: 8px;
                left: 8px;
                right: 8px;
                bottom: 8px;
                border-radius: 12px;
            }

            .diary-cover-icon {
                font-size: 4rem;
                margin-bottom: 12px;
            }

            .diary-cover-title {
                font-size: 1.6rem;
                margin-bottom: 20px;
            }

            .diary-cover-user {
                gap: 12px;
                margin-bottom: 16px;
            }

            .diary-cover-avatar {
                width: 65px;
                height: 65px;
                font-size: 2rem;
            }

            .diary-cover-username {
                font-size: 1.2rem;
            }

            .diary-cover-stats {
                font-size: 0.85rem;
                margin-bottom: 12px;
            }

            .diary-cover-achievement {
                font-size: 0.9rem;
                margin-bottom: 12px;
            }

            .diary-cover-slogan {
                font-size: 0.85rem;
                margin-bottom: 25px;
            }

            .diary-cover-btn {
                padding: 12px 35px;
                font-size: 1.1rem;
            }

            /* 收起日记按钮移动端 */
            .diary-close-btn {
                bottom: 15px;
                left: 15px;
                padding: 8px 16px;
                font-size: 0.85rem;
            }

            /* 底部操作栏 */
            .diary-bottom-bar {
                flex-direction: column;
                gap: 0;
                padding: 0;
                margin-top: 0;
                border-radius: 0 0 20px 20px;
                border: none;
                background: rgba(246, 242, 250, 0.60);
                border-top: 1px solid rgba(213, 207, 224, 0.35);
            }

            .diary-bottom-actions {
                width: 100%;
                padding: 8px 15px;
                gap: 8px;
            }

            .diary-bottom-actions .action-btn {
                flex: 1;
                text-align: center;
                padding: 6px;
                font-size: 0.7rem;
                border-radius: 6px;
            }

            .diary-page-nav-inline {
                width: 100%;
                justify-content: center;
                padding: 8px 15px;
                border-top: 1px solid rgba(213, 207, 224, 0.35);
            }

            .diary-page-nav-btn {
                width: 32px;
                height: 32px;
                font-size: 0.85rem;
            }

            .diary-page-info {
                font-size: 0.78rem;
            }
        }

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

            /* 系列作品视图超小屏适配 */
            .series-group-title {
                font-size: 0.88rem;
            }
            .series-group-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            /* 移动端：系列作品卡片按钮同行排列，按钮文字更小 */
            .series-group-cards .gallery-card .card-user-actions {
                flex-wrap: nowrap;
                padding: 3px 4px 5px;
                gap: 3px;
            }
            .series-group-cards .gallery-card .card-user-actions .action-btn {
                flex: 1 1 0;
                min-width: 0;
                justify-content: center;
                padding: 3px 2px;
                gap: 1px;
                font-size: .52rem;
            }
            .series-group-cards .gallery-card .card-user-actions .action-btn .action-label {
                white-space: nowrap;
                margin-left: 0;
            }
            .series-group-cards .gallery-card .card-user-actions .action-btn .icon {
                font-size: .66rem;
            }
            /* 移动端：未发售游戏卡片，单个愿望单按钮靠右对齐 */
            .gallery-card .card-user-actions.only-wish {
                justify-content: flex-end;
            }
            .gallery-card .card-user-actions.only-wish .action-btn {
                flex: 0 0 auto;
            }
            .series-group-cards .gallery-card .card-user-actions.only-wish {
                justify-content: flex-end;
            }
            .series-group-cards .gallery-card .card-user-actions.only-wish .action-btn {
                flex: 0 0 auto;
            }

            .top-nav-item {
                padding: 4px 7px;
                font-size: 0.7rem;
            }

            .header-action-link {
                padding: 3px 6px;
                font-size: 0.7rem;
            }

            .site-logo {
                font-size: 1rem;
            }

            .site-title-section .site-title {
                font-size: 1.1rem;
            }

            .site-title-section .site-subtitle {
                font-size: 0.68rem;
            }

            .view-tab {
                padding: 5px 12px;
                font-size: .75rem;
            }

            .toolbar-left {
                gap: 4px;
            }

            .btn-random .dice-icon {
                font-size: 0.9rem;
            }

            .gallery-card {
                border-radius: 14px;
            }

            .theme-toggle-floating {
                bottom: 68px;
                right: 12px;
                width: 40px;
                height: 40px;
            }

            .theme-toggle-icon {
                font-size: 1rem;
            }

            #authModalOverlay .modal {
                padding: 16px 12px;
            }

            #profileModalOverlay .modal {
                padding: 16px 12px;
            }

            .user-menu-wrapper .user-name {
                max-width: 30px;
            }

            .achievement-tab-btn {
                padding: 6px 8px;
                font-size: 0.75rem;
            }

            .review-section-title {
                font-size: 0.85rem;
            }

            .comment-item .comment-name {
                font-size: 0.72rem;
            }

            .comment-item .comment-stars {
                font-size: 0.7rem;
            }

            .comment-item .comment-text {
                font-size: 0.72rem;
                white-space: pre-wrap;
            }

            .comment-item .comment-time {
                font-size: 0.55rem;
            }

            .comment-input {
                font-size: 0.75rem;
                min-height: 44px;
                padding: 5px 8px;
            }

            .comment-char-count {
                font-size: 0.6rem;
            }

            .review-user-area .star-rating {
                font-size: 1.0rem !important;
            }

            .review-stats {
                font-size: 0.7rem;
            }

            .review-community-header {
                font-size: 0.78rem;
            }

            .review-user-area {
                padding: 8px;
            }

            .comment-item {
                padding: 6px 8px;
            }

            .comment-item .comment-avatar {
                width: 20px;
                height: 20px;
            }

            #ratingStarsContainer .star {
                font-size: 1.0rem !important;
            }

            .star-rating[style*="font-size:1.4rem;"] {
                font-size: 1.0rem !important;
            }

            .btn-sm {
                font-size: 0.6rem;
                padding: 2px 6px;
            }

            /* 游戏日记小屏幕适配 */
            .diary-cover {
                padding: 40px 30px;
                margin: 30px auto;
            }

            .diary-cover::after {
                top: 8px;
                left: 8px;
                right: 8px;
                bottom: 8px;
                border-radius: 10px;
            }

            .diary-cover-icon {
                font-size: 3rem;
            }

            .diary-cover-title {
                font-size: 1.8rem;
            }

            .diary-entry-left,
            .diary-entry-right {
                padding: 12px;
            }

            .diary-game-name {
                font-size: 0.95rem;
            }

            .diary-rating-row {
                gap: 8px;
            }

            .diary-format-btn {
                width: 24px;
                height: 24px;
                font-size: 0.7rem;
            }

            .diary-review-text {
                min-height: 100px;
                font-size: 0.8rem;
            }

            .diary-entry-actions {
                flex-wrap: wrap;
            }

            .diary-action-btn {
                font-size: 0.65rem;
                padding: 4px 8px;
            }
        }

        /* ===== 详情页移动端额外优化 ===== */
        @media (max-width: 768px) {
            .modal {
                padding: 14px 12px 40px;
            }

            .detail-container {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "header"
                    "main"
                    "desc"
                    "other"
                    "screenshots"
                    "reviews";
                gap: 14px;
                min-width: 0;
                overflow-x: hidden;
            }

            .detail-main {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .detail-cover-wrapper {
                aspect-ratio: 16/9;
                max-height: 260px;
            }

            .detail-cover-wrapper img {
                object-fit: cover;
            }

            .detail-title {
                font-size: 1.4rem;
            }

            .detail-title-en {
                font-size: 0.85rem;
                margin-bottom: 6px;
            }

            .detail-info-wrapper {
                gap: 4px;
            }

            .detail-meta-row {
                font-size: 0.82rem;
                gap: 6px 14px;
            }

            .detail-tags-row .detail-tag {
                font-size: 0.72rem;
                padding: 2px 10px;
            }

            .detail-short-desc {
                font-size: 0.82rem;
            }

            .detail-description {
                font-size: 0.85rem;
                padding: 12px 16px;
            }

            .detail-other-info {
                padding: 12px 14px;
            }

            .detail-other-info .detail-info-table {
                font-size: 1rem;
            }

            .detail-other-info .detail-info-table td {
                padding: 5px 6px;
            }

            .detail-screenshots {
                padding: 12px 14px;
            }

            .detail-screenshots-grid {
                gap: 6px;
            }

            .detail-screenshots-grid img {
                max-height: 160px;
            }

            .detail-screenshots-grid .screenshot-wrap.gif-img img {
                max-height: none;
            }

            .detail-screenshots-grid .screenshot-wrap.video-wrap video {
                max-height: 160px;
            }

            .detail-screenshots-grid.screenshots-2 img {
                max-height: none;
            }

            .detail-header {
                gap: 8px;
                padding: 4px 0 10px;
            }

            .detail-back-btn {
                font-size: 0.8rem;
                padding: 4px 12px 4px 8px;
            }

            .detail-share-btn {
                font-size: 0.78rem;
                padding: 4px 10px;
            }

            .detail-status-label {
                font-size: 0.75rem;
                padding: 1px 10px;
            }

            .detail-id {
                font-size: 0.7rem;
            }

            .detail-actions {
                gap: 8px;
            }

            /* 系列作品区块移动端适配 */
            .detail-series-section {
                margin: 0 14px 16px;
                padding: 14px;
                min-width: 0;
            }

            .detail-series-section h3 {
                font-size: 0.9rem;
                margin-bottom: 10px;
            }

            .detail-series-item {
                /* 手机端：改为主画廊同风格的 16:9 横版卡片，保持封面完整 */
                width: 180px;
                display: flex;
                flex-direction: column;
            }

            .detail-series-item-cover {
                /* 主画廊卡片同款：16:9 横版比例，object-fit: cover 保证封面等比例不被裁切 */
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 9;
            }

            .detail-series-item-body {
                padding: 6px 8px 8px;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .detail-series-item-title {
                font-size: 0.72rem;
                line-height: 1.2;
            }

            .detail-series-item-date {
                /* 手机端：日期不换行，字号更小 */
                font-size: 0.58rem;
                white-space: nowrap;
            }

            .detail-links .detail-link-btn {
                font-size: 0.9rem;
                padding: 4px 14px;
            }

            .review-section {
                margin-top: 0;
                padding-top: 10px;
            }

            /* 评分条移动端适配：5 个评分项不再强制 min-width，避免最后一项溢出被裁切 */
            .verdict-strip {
                gap: 4px;
            }

            .verdict-pill {
                flex: 1 1 auto;
                min-width: 0;
                padding: 6px 2px;
                font-size: 0.7rem;
            }

            .verdict-pill .verdict-emoji {
                font-size: 1rem;
                margin-bottom: 1px;
            }

            #imageViewerOverlay img {
                max-width: 100vw;
                max-height: 80vh;
            }

            #imageViewerClose {
                top: 12px;
                right: 16px;
                font-size: 1.6rem;
                padding: 0 12px;
            }

            /* 打赏弹窗移动端适配 */
            #tipModalOverlay .modal {
                max-width: 95%;
                padding: 24px 16px 28px;
                border-radius: 24px;
            }

            #tipModalOverlay .tip-card {
                padding: 18px 14px 22px;
            }

            #tipModalOverlay .tip-card .tip-qrcode {
                max-width: 240px;
            }

            #tipModalOverlay .tip-link-btn {
                padding: 10px 28px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .modal {
                padding: 10px 8px 32px;
            }

            .detail-title {
                font-size: 1.2rem;
            }

            .detail-title-en {
                font-size: 0.8rem;
                margin-bottom: 4px;
            }

            .detail-cover-wrapper {
                max-height: 180px;
            }

            .detail-short-desc {
                font-size: 0.78rem;
            }

            .detail-description {
                font-size: 0.8rem;
                padding: 10px 12px;
            }

            .detail-other-info .detail-info-table {
                font-size: 0.9rem;
            }

            .detail-other-info .detail-info-table td {
                padding: 4px 4px;
            }

            .detail-other-info .detail-info-table td:first-child {
                width: 34%;
            }

            .detail-back-btn {
                font-size: 0.72rem;
                padding: 3px 8px 3px 6px;
            }

            .detail-share-btn {
                font-size: 0.7rem;
                padding: 3px 8px;
            }

            .detail-status-label {
                font-size: 0.68rem;
                padding: 1px 8px;
            }

            .detail-links .detail-link-btn {
                font-size: 0.8rem;
                padding: 3px 12px;
            }

            .detail-screenshots-grid img {
                max-height: 120px;
            }

            .detail-screenshots-grid .screenshot-wrap.gif-img img {
                max-height: none;
            }

            .detail-screenshots-grid .screenshot-wrap.video-wrap video {
                max-height: 120px;
            }

            .detail-screenshots-grid.screenshots-2 img {
                max-height: none;
            }

            /* 系列作品区块超小屏适配 */
            .detail-series-section {
                margin: 0 10px 12px;
                padding: 12px;
            }

            .detail-series-item {
                /* 小屏移动端：与主画廊同风格的 16:9 横版卡片，尺寸等比例缩小 */
                width: 160px;
                display: flex;
                flex-direction: column;
            }

            .detail-series-item-cover {
                /* 16:9 横版比例，object-fit: cover 保证封面等比例不被裁切 */
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 9;
            }

            .detail-series-item-body {
                padding: 5px 7px 7px;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .detail-series-item-title {
                font-size: 0.68rem;
                line-height: 1.2;
            }

            .detail-series-item-date {
                font-size: 0.54rem;
                white-space: nowrap;
            }

            #imageViewerOverlay img {
                max-height: 70vh;
            }

            #imageViewerClose {
                top: 10px;
                right: 12px;
                font-size: 1.4rem;
                padding: 0 10px;
            }
        }

        /* ===== 评论分享按钮样式 ===== */
        .comment-share-btn {
            background: none;
            border: none;
            color: var(--text3);
            font-size: 0.75rem;
            cursor: pointer;
            padding: 0 4px;
            transition: color 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .comment-share-btn:hover {
            color: var(--accent);
        }

        .comment-item .comment-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
            flex-wrap: wrap;
        }

        /* ===== 首次引导浮层 ===== */
        .guide-overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeInOverlay 0.3s ease;
        }

        .guide-overlay.show {
            display: flex;
        }

        .guide-card {
            background: var(--bg);
            border-radius: 24px;
            max-width: 420px;
            width: 100%;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            animation: slideUpCard 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 32px 28px 24px;
            position: relative;
        }

        .guide-card .guide-step {
            display: none;
            text-align: center;
        }

        .guide-card .guide-step.active {
            display: block;
        }

        .guide-card .guide-step-icon {
            font-size: 3rem;
            margin-bottom: 12px;
            display: block;
        }

        .guide-card .guide-step-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }

        .guide-card .guide-step-desc {
            font-size: 0.9rem;
            color: var(--text2);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .guide-card .guide-step-location {
            font-size: 0.8rem;
            color: var(--accent);
            background: var(--accent-light);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 12px;
            margin-bottom: 20px;
            line-height: 1.4;
            text-align: left;
        }

        .guide-card .guide-dots {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .guide-card .guide-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border);
            transition: all 0.3s;
        }

        .guide-card .guide-dot.active {
            background: var(--accent);
            width: 24px;
            border-radius: 4px;
        }

        .guide-card .guide-btn-row {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .guide-card .guide-btn {
            padding: 10px 28px;
            border-radius: 20px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            font-size: 0.88rem;
            font-weight: 500;
            touch-action: manipulation;
            transition: all 0.2s;
            font-family: inherit;
        }

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

        .guide-card .guide-btn.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .guide-card .guide-btn.primary:hover {
            background: var(--accent2);
            border-color: var(--accent2);
        }

        .guide-card .guide-btn:active {
            transform: scale(0.96);
            background: var(--card-hover);
        }

        .guide-card .guide-btn.primary:active {
            background: var(--accent2);
            border-color: var(--accent2);
            transform: scale(0.96);
        }

        .guide-card .guide-skip {
            position: absolute;
            top: 12px;
            right: 16px;
            background: none;
            border: none;
            color: var(--text3);
            font-size: 0.85rem;
            cursor: pointer;
            padding: 4px 8px;
            touch-action: manipulation;
        }

        .guide-card .guide-skip:hover {
            color: var(--text);
        }

        /* ===== 公告弹窗浮层 ===== */
        .announcement-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 4000;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeInOverlay 0.3s ease;
        }

        .announcement-modal-overlay.show {
            display: flex;
        }

        .announcement-modal-card {
            background: var(--bg);
            border-radius: 24px;
            max-width: 480px;
            width: 100%;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            animation: slideUpCard 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 28px 28px 24px;
            position: relative;
        }

        .announcement-modal-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
        }

        .announcement-modal-icon {
            font-size: 1.8rem;
        }

        .announcement-modal-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text);
            flex: 1;
        }

        .announcement-modal-close {
            position: absolute;
            top: 12px;
            right: 16px;
            background: none;
            border: none;
            color: var(--text3);
            font-size: 1.1rem;
            cursor: pointer;
            padding: 4px 8px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s, transform 0.12s ease, background 0.12s ease;
        }

        .announcement-modal-close:hover {
            color: var(--text);
            transform: rotate(90deg);
        }

        .announcement-modal-body {
            font-size: 0.9rem;
            color: var(--text2);
            line-height: 1.75;
            margin-bottom: 20px;
        }

        .announcement-modal-body p {
            margin-bottom: 10px;
        }

        .announcement-modal-body p:last-child {
            margin-bottom: 0;
        }

        .announcement-modal-body strong {
            color: var(--accent);
            font-weight: 600;
        }

        .announcement-modal-body ul {
            padding-left: 20px;
            margin-bottom: 10px;
        }

        .announcement-modal-body li {
            margin-bottom: 4px;
        }

        .announcement-modal-footer {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .announcement-modal-btn {
            padding: 9px 24px;
            border-radius: 20px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            font-family: inherit;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
        }

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

        .announcement-modal-btn.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .announcement-modal-btn.primary:hover {
            background: var(--accent2);
            border-color: var(--accent2);
        }

        .announcement-modal-btn:active {
            transform: scale(0.92);
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            box-shadow: 0 2px 8px rgba(155, 138, 189, 0.4);
        }

        .announcement-modal-btn.primary:active {
            transform: scale(0.92);
            background: var(--accent2);
            border-color: var(--accent2);
            color: #fff;
            filter: brightness(0.85);
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
        }

        .announcement-modal-close:active {
            color: var(--accent);
            transform: rotate(90deg) scale(0.85);
            background: rgba(155, 138, 189, 0.18);
            border-radius: 50%;
        }

        @media (max-width: 480px) {
            .announcement-modal-card {
                padding: 24px 20px 20px;
            }
            .announcement-modal-title {
                font-size: 1.05rem;
            }
            .announcement-modal-body {
                font-size: 0.85rem;
            }
            .announcement-modal-btn {
                min-height: 44px;
                font-size: 0.95rem;
                padding: 10px 22px;
            }
            .announcement-modal-close {
                padding: 8px 12px;
            }
        }

        /* ===== 快捷键提示 ===== */
        .shortcut-hint {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 100;
            background: var(--glass-bg-light);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 8px 14px;
            font-size: 0.75rem;
            color: var(--text3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .shortcut-hint.show {
            opacity: 1;
        }

        .shortcut-hint kbd {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            font-family: inherit;
            font-size: 0.72rem;
            color: var(--text2);
            margin: 0 2px;
        }

        /* ===== 空状态引导 ===== */
        .empty-state-guide {
            text-align: center;
            padding: 40px 20px;
            color: var(--text3);
        }

        .empty-state-guide .empty-icon {
            font-size: 3rem;
            display: block;
            margin-bottom: 12px;
        }

        .empty-state-guide .empty-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 6px;
        }

        .empty-state-guide .empty-desc {
            font-size: 0.88rem;
            margin-bottom: 16px;
        }

        .empty-state-guide .empty-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 20px;
            border-radius: 20px;
            border: 1.5px solid var(--accent);
            background: transparent;
            color: var(--accent);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s;
            font-family: inherit;
        }

        .empty-state-guide .empty-action:hover {
            background: var(--accent);
            color: #fff;
        }

        /* ===== 移动端长按优化 ===== */
        .share-image-container img {
            -webkit-touch-callout: none;
            touch-action: manipulation;
        }

        @media (max-width: 768px) {
            .guide-card {
                padding: 24px 20px 20px;
            }

            .guide-card .guide-step-icon {
                font-size: 2.5rem;
            }

            .guide-card .guide-step-title {
                font-size: 1.05rem;
            }

            .guide-card .guide-step-desc {
                font-size: 0.82rem;
            }

            .guide-card .guide-step-location {
                font-size: 0.72rem;
                padding: 6px 10px;
            }

            .shortcut-hint {
                display: none;
            }
        }

        /* ===== 评论编辑内联 UI ===== */
        .comment-edit-area {
            margin-top: 6px;
        }

        .comment-edit-area textarea {
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-family: inherit;
            resize: vertical;
            min-height: 50px;
            font-size: 0.85rem;
            transition: border-color 0.2s;
        }

        .comment-edit-area textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .comment-edit-actions {
            display: flex;
            gap: 8px;
            margin-top: 6px;
            justify-content: flex-end;
        }

        /* ===== 回复按钮样式 ===== */
        .comment-reply-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
            user-select: none;
        }

        .comment-reply-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(155, 138, 189, 0.08);
        }

        /* ===== 点赞按钮样式 ===== */
        .comment-like-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
            user-select: none;
        }

        .comment-like-btn:hover {
            border-color: #e74c3c;
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.08);
        }

        .comment-like-btn.liked {
            border-color: #e74c3c;
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.12);
        }

        /* ===== 回复输入框样式 ===== */
        .reply-compose {
            margin-top: 10px;
            padding: 10px;
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .reply-compose textarea {
            width: 100%;
            min-height: 60px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg);
            color: var(--text);
            font-size: 0.85rem;
            resize: vertical;
            font-family: inherit;
        }

        .reply-compose textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(155, 138, 189, 0.15);
        }

        .reply-compose-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 8px;
        }

        .reply-compose-actions .btn {
            padding: 4px 12px;
            font-size: 0.8rem;
        }

        /* ===== 回复列表样式 ===== */
        .reply-list {
            margin-top: 10px;
            padding-left: 20px;
            border-left: 2px solid var(--border);
        }

        .reply-item {
            padding: 8px 0;
            border-bottom: 1px dashed var(--border);
        }

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

        .reply-item-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .reply-item-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
        }

        .reply-item-name {
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--text);
        }

        .reply-item-time {
            font-size: 0.65rem;
            color: var(--text3);
        }

        .reply-item-content {
            font-size: 0.82rem;
            color: var(--text2);
            line-height: 1.5;
            word-break: break-word;
        }

        .reply-to-label {
            color: var(--accent);
            font-size: 0.75rem;
            margin-right: 4px;
        }

        /* ===== 嵌套回复样式 ===== */
        .reply-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }

        .nested-reply-list {
            margin-top: 8px;
            padding-left: 16px;
            border-left: 2px solid var(--border);
        }

        .nested-reply-list .reply-item-avatar {
            width: 18px;
            height: 18px;
        }

        .nested-reply-list .reply-item-name {
            font-size: 0.72rem;
        }

        .nested-reply-list .reply-item-content {
            font-size: 0.78rem;
        }

        .nested-reply-compose {
            margin-top: 6px;
            padding-left: 0;
        }

        .nested-reply-compose textarea {
            font-size: 0.78rem;
            min-height: 36px;
            padding: 6px 8px;
        }

        #confettiCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9991;
        }

        /* ================================================================
   ★★★ 下拉菜单 ★★★
   ================================================================ */
        .header-dropdown {
            position: relative;
            display: inline-block;
            pointer-events: auto;
        }

        .header-dropdown-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            user-select: none;
            background: none;
            border: none;
            font-family: inherit;
            padding: 0;
        }

        .header-dropdown-btn .dropdown-arrow-icon {
            font-size: 0.7rem;
            color: var(--text3);
            transition: transform 0.2s;
            line-height: 1;
        }

        .header-dropdown-btn.open .dropdown-arrow-icon {
            transform: rotate(180deg);
        }

        .header-dropdown-menu {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #faf7fd;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 6px 0;
            min-width: 160px;
            box-shadow: var(--shadow-lg);
            z-index: 9980;
            pointer-events: auto;
        }

        .header-dropdown-menu.show {
            display: block;
        }

        .header-dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text);
            cursor: pointer;
            font-size: 0.88rem;
            transition: background 0.15s;
            font-family: inherit;
            text-align: left;
            white-space: nowrap;
        }

        .header-dropdown-item:hover {
            background: var(--card-hover);
        }

        .header-dropdown-item.active {
            color: var(--accent);
            font-weight: 600;
            background: rgba(155, 138, 189, 0.08);
        }

        .header-dropdown-item .item-icon {
            font-size: 1rem;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }

        /* ================================================================
   ★★★ 公告板块 ★★★
   ================================================================ */
        .announcements-section {
            display: none;
            max-width: 760px;
            margin: 0 auto;
            padding: 16px 20px 60px;
            position: relative;
            z-index: 2;
        }

        .announcements-section.show {
            display: block;
        }

        .announcements-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .announcements-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent2);
        }

        .announcements-subtitle {
            font-size: 0.85rem;
            color: var(--text3);
            margin-top: 4px;
        }

        .announcements-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .announcement-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px 24px;
            transition: all 0.3s ease;
            position: relative;
        }

        .announcement-card:hover {
            box-shadow: 0 4px 20px rgba(60, 30, 80, 0.1);
            transform: translateY(-1px);
        }

        .announcement-card-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .announcement-card-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            font-size: 0.8rem;
            color: var(--text3);
        }

        .announcement-card-date {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .announcement-card-body {
            font-size: 0.9rem;
            color: var(--text2);
            line-height: 1.7;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
            opacity: 0;
            margin-top: 0;
        }

        .announcement-card-body.expanded {
            max-height: 2000px;
            opacity: 1;
            margin-top: 12px;
        }

        .announcement-expand-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 4px 12px;
            font-size: 0.75rem;
            color: var(--accent);
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
            font-family: inherit;
        }

        .announcement-expand-btn:hover {
            background: var(--accent-light);
            border-color: var(--accent);
        }

        .announcement-expand-btn .arrow {
            display: inline-block;
            transition: transform 0.3s ease;
        }

        .announcement-expand-btn.expanded .arrow {
            transform: rotate(180deg);
        }

        .announcement-card-actions {
            position: absolute;
            top: 16px;
            right: 16px;
            display: flex;
            gap: 6px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .announcement-card:hover .announcement-card-actions {
            opacity: 1;
        }

        .announcement-card-action-btn {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 0.75rem;
            cursor: pointer;
            color: var(--text2);
            transition: all 0.2s;
            font-family: inherit;
        }

        .announcement-card-action-btn:hover {
            background: var(--accent-light);
            color: var(--accent);
        }

        .announcement-card-action-btn.danger:hover {
            background: rgba(192, 57, 43, 0.1);
            color: var(--danger);
        }

        .announcement-card.pinned {
            border-color: var(--accent);
            background: linear-gradient(135deg, var(--surface) 0%, var(--accent-light) 100%);
        }

        .announcement-card.pinned .announcement-card-title {
            font-size: calc(1.1rem + 5px);
        }

        .announcement-card-pin-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.7rem;
            background: var(--accent);
            color: #fff;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 600;
            margin-left: 8px;
            vertical-align: middle;
        }

        .announcement-card-action-btn.pin-btn {
            color: var(--accent);
        }

        .announcement-card-action-btn.pin-btn:hover {
            background: var(--accent-light);
        }

        .announcements-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
            font-size: 0.9rem;
        }

        /* 公告编辑弹窗 */
        .announcement-edit-overlay {
            position: fixed;
            inset: 0;
            background: var(--overlay);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            padding: 20px;
        }

        .announcement-edit-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .announcement-edit-modal {
            background: var(--modal-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 24px;
            width: 100%;
            max-width: 560px;
            max-height: 85vh;
            overflow-y: auto;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .announcement-edit-overlay.show .announcement-edit-modal {
            transform: translateY(0);
        }

        .announcement-edit-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 16px;
        }

        .announcement-edit-form .form-group {
            margin-bottom: 16px;
        }

        .announcement-edit-form label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 6px;
        }

        .announcement-edit-form input[type="text"],
        .announcement-edit-form textarea,
        .announcement-edit-form input[type="date"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.9rem;
            font-family: inherit;
            background: var(--input-bg);
            color: var(--text);
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .announcement-edit-form input[type="text"]:focus,
        .announcement-edit-form textarea:focus,
        .announcement-edit-form input[type="date"]:focus {
            outline: none;
            border-color: var(--accent);
        }

        .announcement-edit-form textarea {
            min-height: 160px;
            resize: vertical;
            line-height: 1.6;
        }

        .announcement-edit-form .form-row {
            display: flex;
            gap: 12px;
        }

        .announcement-edit-form .form-row .form-group {
            flex: 1;
        }

        .announcement-edit-form .pin-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }

        .announcement-edit-form .pin-toggle input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent);
            cursor: pointer;
        }

        .announcement-edit-form .pin-toggle-label {
            font-size: 0.85rem;
            color: var(--text2);
        }

        .announcement-edit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .announcement-edit-actions .btn {
            padding: 8px 20px;
            font-size: 0.88rem;
        }

        /* ================================================================
   ★★★ MOD 板块 ★★★
   ================================================================ */
        .mod-section {
            display: none;
            max-width: 800px;
            margin: 0 auto;
            padding: 16px 20px 40px;
            position: relative;
            z-index: 2;
        }

        .mod-section.show {
            display: block;
        }

        .mod-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .mod-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .mod-header-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text);
        }

        .mod-header-stats {
            font-size: 0.82rem;
            color: var(--text3);
        }

        .mod-header-stats strong {
            color: var(--accent);
        }

        .mod-notice {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            background: linear-gradient(135deg, rgba(255, 183, 77, 0.08), rgba(255, 152, 0, 0.04));
            border: 1px solid rgba(255, 152, 0, 0.25);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 18px;
        }

        .mod-notice-icon {
            font-size: 1.3rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .mod-notice-body {
            flex: 1;
            min-width: 0;
        }

        .mod-notice-title {
            font-weight: 700;
            font-size: 0.88rem;
            color: var(--text);
            margin-bottom: 4px;
        }

        .mod-notice-text {
            font-size: 0.82rem;
            color: var(--text2);
            line-height: 1.6;
        }

        .mod-notice-text strong {
            color: var(--accent);
        }

        /* 发布区 */
        .mod-compose-trigger-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 20px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 16px;
            transition: opacity 0.2s;
        }

        .mod-compose-trigger-btn:hover {
            opacity: 0.85;
        }

        .mod-compose {
            background: var(--surface2);
            border-radius: 16px;
            padding: 16px;
            border: 1px solid var(--border);
            margin-bottom: 20px;
        }

        .mod-compose-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .mod-compose-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            flex-shrink: 0;
        }

        .mod-compose-avatar-placeholder {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .mod-compose-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text);
        }

        .mod-compose .form-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        .mod-compose .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
            position: relative;
        }

        .mod-compose .form-group label {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 3px;
            color: var(--text2);
        }

        .mod-compose .form-group input,
        .mod-compose .form-group select {
            width: 100%;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-size: 0.88rem;
            font-family: inherit;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .mod-compose .form-group input:focus,
        .mod-compose .form-group select:focus {
            outline: none;
            border-color: var(--accent);
        }

        .mod-compose textarea {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-family: inherit;
            resize: none;
            min-height: 70px;
            font-size: 0.88rem;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .mod-compose textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .mod-compose textarea::placeholder {
            color: var(--text3);
            opacity: 0.7;
        }

        .mod-compose-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .mod-compose-footer .char-count {
            font-size: 0.75rem;
            color: var(--text3);
        }

        .mod-compose-footer .char-count.warn {
            color: var(--danger);
        }

        .mod-login-hint {
            text-align: center;
            color: var(--text3);
            padding: 20px 0;
            font-size: 0.9rem;
        }

        .mod-login-hint a {
            color: var(--accent);
            cursor: pointer;
            text-decoration: underline;
        }

        /* MOD标签 */
        .mod-tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 0.72rem;
            font-weight: 500;
            white-space: nowrap;
        }

        .mod-tag.translation {
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
        }

        .mod-tag.model {
            background: rgba(168, 85, 247, 0.12);
            color: #a855f7;
        }

        .mod-tag.graphics {
            background: rgba(236, 72, 153, 0.12);
            color: #ec4899;
        }

        .mod-tag.function {
            background: rgba(34, 197, 94, 0.12);
            color: #22c55e;
        }

        .mod-tag.story {
            background: rgba(249, 115, 22, 0.12);
            color: #f97316;
        }

        .mod-tag.other {
            background: var(--glass-bg-light);
            color: var(--tag-text);
        }

        /* MOD列表 */
        .mod-sort-row {
            display: flex;
            gap: 6px;
            margin-bottom: 14px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .mod-sort-btn {
            padding: 5px 14px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.78rem;
            transition: all 0.2s;
            font-family: inherit;
        }

        .mod-sort-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .mod-filter-row {
            display: flex;
            gap: 6px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .mod-filter-btn {
            padding: 4px 12px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
            font-family: inherit;
        }

        .mod-filter-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .mod-post-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .mod-post-item {
            background: var(--surface);
            border-radius: 14px;
            padding: 14px 16px;
            border: 1px solid var(--border);
            transition: border-color 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .mod-post-item:hover {
            border-color: rgba(155, 138, 189, 0.3);
            box-shadow: 0 2px 12px rgba(155, 138, 189, 0.08);
        }

        .mod-post-item-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .mod-post-item-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            flex-shrink: 0;
        }

        .mod-post-item-avatar-placeholder {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .mod-post-item-user {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--text);
        }

        .mod-post-item-time {
            font-size: 0.7rem;
            color: var(--text3);
            margin-left: auto;
            white-space: nowrap;
        }

        .mod-post-item-title {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            margin-bottom: 4px;
            line-height: 1.4;
        }

        .mod-post-item-game {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            color: var(--accent);
            background: rgba(155, 138, 189, 0.08);
            padding: 2px 8px;
            border-radius: 8px;
            margin-bottom: 6px;
        }

        .mod-post-item-content {
            font-size: 0.85rem;
            color: var(--text2);
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
            word-break: break-word;
        }

        .mod-post-item-footer {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            border-top: 1px solid var(--border);
            padding-top: 8px;
            margin-top: 4px;
        }

        .mod-post-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
            user-select: none;
        }

        .mod-post-action-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .mod-post-action-btn.liked {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(155, 138, 189, 0.1);
        }

        .mod-post-action-btn .count {
            font-weight: 600;
            min-width: 1em;
            text-align: center;
        }

        .mod-post-action-btn.thanked {
            border-color: #e74c8b;
            color: #e74c8b;
            background: rgba(231, 76, 139, 0.1);
        }

        .mod-badge {
            font-size: 0.75rem;
            margin-left: 2px;
        }

        .badge-hot {
            filter: drop-shadow(0 0 3px rgba(255, 100, 0, 0.4));
        }

        .badge-star {
            filter: drop-shadow(0 0 3px rgba(245, 166, 35, 0.5));
        }

        .badge-featured {
            filter: drop-shadow(0 0 3px rgba(245, 215, 0, 0.4));
        }

        .mod-admin-badge-menu {
            position: relative;
            display: inline-block;
            margin-left: 4px;
        }

        .mod-admin-badge-btn {
            background: none;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 1px 6px;
            font-size: 0.7rem;
            color: var(--text3);
            cursor: pointer;
            transition: all 0.2s;
            line-height: 1;
        }

        .mod-admin-badge-btn:hover {
            background: var(--card-hover);
            color: var(--text);
        }

        .mod-admin-badge-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            z-index: 9990;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 6px 0;
            min-width: 150px;
            box-shadow: var(--shadow-lg);
            backdrop-filter: blur(20px);
        }

        .mod-admin-badge-dropdown.show {
            display: block;
        }

        .mod-admin-badge-dropdown .badge-toggle-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 14px;
            font-size: 0.82rem;
            color: var(--text);
            cursor: pointer;
            transition: background 0.15s;
            width: 100%;
            border: none;
            background: none;
            text-align: left;
            font-family: inherit;
        }

        .mod-admin-badge-dropdown .badge-toggle-item:hover {
            background: var(--card-hover);
        }

        .mod-admin-badge-dropdown .badge-toggle-item .badge-toggle-label {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mod-admin-badge-dropdown .badge-toggle-item .badge-toggle-status {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .mod-admin-badge-dropdown .badge-toggle-item .badge-toggle-status.on {
            background: rgba(93, 138, 94, 0.15);
            color: var(--success);
        }

        .mod-admin-badge-dropdown .badge-toggle-item .badge-toggle-status.off {
            background: rgba(140, 128, 153, 0.1);
            color: var(--text3);
        }

        .author-card-popup {
            position: fixed;
            z-index: 10000;
            background: var(--modal-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px;
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            max-width: 260px;
            backdrop-filter: blur(20px);
            pointer-events: auto;
        }

        .author-card-popup .author-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .author-card-popup .author-card-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border);
        }

        .author-card-popup .author-card-avatar-placeholder {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--tag-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .author-card-popup .author-card-name {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--text);
        }

        .author-card-popup .author-card-badges {
            font-size: 0.85rem;
            margin-top: 2px;
        }

        .author-card-popup .author-card-stats {
            display: flex;
            gap: 16px;
            font-size: 0.82rem;
            color: var(--text2);
        }

        .author-card-popup .author-card-stats span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .author-card-popup .author-card-stats strong {
            color: var(--accent);
            font-weight: 700;
        }

        .mod-thanks-list {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            padding: 10px 0;
            border-top: 1px solid var(--border);
            margin-top: 12px;
            font-size: 0.82rem;
            color: var(--text2);
        }

        .mod-thanks-label {
            white-space: nowrap;
        }

        .mod-thanks-avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            object-fit: cover;
            border: 1.5px solid var(--border);
        }

        .mod-thanks-avatar-placeholder {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--tag-bg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
        }

        .mod-thanks-extra {
            color: var(--text3);
            margin-left: 2px;
        }

        .mod-post-delete-btn {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--text3);
            font-size: 0.7rem;
            cursor: pointer;
            padding: 2px 8px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .mod-post-delete-btn:hover {
            color: var(--danger);
            background: rgba(192, 57, 43, 0.08);
        }

        .mod-post-edit-btn {
            background: none;
            border: none;
            color: var(--text3);
            font-size: 0.7rem;
            cursor: pointer;
            padding: 2px 8px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .mod-post-edit-btn:hover {
            color: var(--accent);
            background: rgba(155, 138, 189, 0.08);
        }

        .mod-post-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            border-radius: 12px;
            border: 1px solid var(--accent);
            background: transparent;
            color: var(--accent);
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.2s;
            text-decoration: none;
        }

        .mod-post-link-btn:hover {
            background: var(--accent);
            color: #fff;
        }

        /* MOD详情 */
        .mod-detail-overlay {
            position: fixed;
            inset: 0;
            z-index: 1500;
            background: var(--bg);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .mod-detail-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .mod-detail-container {
            max-width: 720px;
            margin: 0 auto;
            padding: 16px 20px 60px;
        }

        .mod-detail-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0 14px;
            border-bottom: 1.5px solid var(--border);
            margin-bottom: 16px;
            position: sticky;
            top: 0;
            background: var(--bg);
            z-index: 10;
        }

        .mod-detail-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px 6px 12px;
            border-radius: 24px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            font-size: 0.88rem;
            font-weight: 500;
            transition: all 0.25s ease;
            font-family: inherit;
        }

        .mod-detail-back-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .mod-detail-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.3;
            margin-bottom: 8px;
        }

        .mod-detail-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .mod-detail-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.82rem;
            color: var(--text2);
        }

        .mod-detail-author:hover {
            color: var(--accent);
            text-decoration: underline;
        }

        .mod-detail-game-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8rem;
            color: var(--accent);
            background: rgba(155, 138, 189, 0.1);
            padding: 3px 12px;
            border-radius: 12px;
        }

        .mod-detail-content {
            font-size: 0.92rem;
            color: var(--text);
            line-height: 1.8;
            white-space: pre-line;
            word-break: break-word;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .mod-detail-link-section {
            background: var(--surface2);
            border-radius: 12px;
            padding: 14px 16px;
            border: 1px solid var(--border);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .mod-detail-link-label {
            font-size: 0.85rem;
            color: var(--text2);
        }

        .mod-detail-link-url {
            font-size: 0.8rem;
            color: var(--accent);
            word-break: break-all;
            text-decoration: none;
            transition: color 0.2s;
        }

        .mod-detail-link-url:hover {
            color: var(--accent2);
            text-decoration: underline;
        }

        .mod-detail-link-open {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 18px;
            border-radius: 20px;
            background: var(--accent);
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.25s;
            text-decoration: none;
            font-family: inherit;
            white-space: nowrap;
        }

        .mod-detail-link-open:hover {
            background: var(--accent2);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(155, 138, 189, 0.25);
        }

        .mod-detail-actions {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .mod-detail-comments-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 12px;
        }

        .mod-comment-compose {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
            align-items: flex-start;
        }

        .mod-comment-compose textarea {
            flex: 1;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            font-family: inherit;
            resize: none;
            min-height: 50px;
            font-size: 0.85rem;
            transition: border-color 0.2s;
        }

        .mod-comment-compose textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .mod-comment-compose textarea::placeholder {
            color: var(--text3);
            opacity: 0.7;
        }

        .mod-comment-compose .btn {
            flex-shrink: 0;
            align-self: flex-end;
        }

        .mod-comment-item {
            display: flex;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--surface);
            margin-bottom: 8px;
            align-items: flex-start;
        }

        .mod-comment-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            flex-shrink: 0;
        }

        .mod-comment-avatar-placeholder {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--tag-bg);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        .mod-comment-body {
            flex: 1;
            min-width: 0;
        }

        .mod-comment-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
            flex-wrap: wrap;
        }

        .mod-comment-name {
            font-weight: 600;
            font-size: 0.82rem;
            color: var(--text);
        }

        .mod-comment-time {
            font-size: 0.68rem;
            color: var(--text3);
            margin-left: auto;
            white-space: nowrap;
        }

        .mod-comment-text {
            font-size: 0.85rem;
            color: var(--text2);
            line-height: 1.5;
            word-break: break-word;
            white-space: pre-wrap;
        }

        .mod-comment-delete {
            background: none;
            border: none;
            color: var(--text3);
            font-size: 0.65rem;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            transition: all 0.2s;
            flex-shrink: 0;
            align-self: center;
        }

        .mod-comment-delete:hover {
            color: var(--danger);
            background: rgba(192, 57, 43, 0.08);
        }

        /* ===== MOD评论回复和点赞样式 ===== */
        .mod-comment-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
        }

        .mod-comment-reply-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.72rem;
            transition: all 0.2s;
            user-select: none;
        }

        .mod-comment-reply-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(155, 138, 189, 0.08);
        }

        .mod-comment-like-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text3);
            cursor: pointer;
            font-size: 0.72rem;
            transition: all 0.2s;
            user-select: none;
        }

        .mod-comment-like-btn:hover {
            border-color: #e74c3c;
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.08);
        }

        .mod-comment-like-btn.liked {
            border-color: #e74c3c;
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.12);
        }

        .mod-reply-compose {
            margin-top: 10px;
            padding: 10px;
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .mod-reply-compose textarea {
            width: 100%;
            min-height: 60px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg);
            color: var(--text);
            font-size: 0.85rem;
            resize: vertical;
            font-family: inherit;
        }

        .mod-reply-compose textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(155, 138, 189, 0.15);
        }

        .mod-reply-compose-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 8px;
        }

        .mod-reply-compose-actions .btn {
            padding: 4px 12px;
            font-size: 0.78rem;
        }

        .mod-reply-list {
            margin-top: 10px;
            padding-left: 16px;
            border-left: 2px solid var(--border);
        }

        .mod-reply-item {
            padding: 8px 0;
            border-bottom: 1px dashed var(--border);
        }

        .mod-reply-item:last-child {
            border-bottom: none;
        }

        .mod-reply-item-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .mod-reply-item-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--tag-bg);
        }

        .mod-reply-item-name {
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--text);
        }

        .mod-reply-item-time {
            font-size: 0.65rem;
            color: var(--text3);
        }

        .mod-reply-item-content {
            font-size: 0.82rem;
            color: var(--text2);
            line-height: 1.5;
            word-break: break-word;
        }

        /* ===== MOD评论嵌套回复样式 ===== */
        .mod-reply-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }

        .mod-reply-item-actions .mod-comment-reply-btn,
        .mod-reply-item-actions .mod-comment-delete {
            font-size: 0.6rem;
            padding: 2px 6px;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .mod-reply-item-actions .mod-comment-reply-btn:hover,
        .mod-reply-item-actions .mod-comment-delete:hover {
            opacity: 1;
        }

        .mod-reply-to-label {
            color: var(--accent);
            font-size: 0.75rem;
            margin-right: 4px;
        }

        .mod-nested-reply-list {
            margin-top: 8px;
            padding-left: 16px;
            border-left: 2px solid var(--border);
        }

        .mod-nested-reply-list .mod-reply-item-avatar {
            width: 18px;
            height: 18px;
        }

        .mod-nested-reply-list .mod-reply-item-name {
            font-size: 0.72rem;
        }

        .mod-nested-reply-list .mod-reply-item-content {
            font-size: 0.78rem;
        }

        .mod-nested-reply-compose {
            margin-top: 6px;
        }

        .mod-nested-reply-compose textarea {
            font-size: 0.78rem;
            min-height: 36px;
            padding: 6px 8px;
        }

        .mod-empty {
            text-align: center;
            padding: 50px 20px;
            color: var(--text3);
        }

        .mod-empty .empty-icon {
            font-size: 3rem;
            display: block;
            margin-bottom: 12px;
        }

        .mod-empty .empty-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 6px;
        }

        .mod-empty .empty-desc {
            font-size: 0.88rem;
        }

        .mod-load-more {
            text-align: center;
            padding: 12px 0;
        }

        .mod-load-more button {
            background: none;
            border: 1px solid var(--border);
            color: var(--text2);
            padding: 6px 20px;
            border-radius: 16px;
            cursor: pointer;
            font-size: 0.82rem;
            transition: all 0.2s;
            font-family: inherit;
        }

        .mod-load-more button:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        @media (max-width: 768px) {
            .mod-section {
                padding: 12px 12px 32px;
            }

            .mod-compose .form-row {
                flex-direction: column;
                gap: 0;
            }

            .mod-compose .form-row .form-group {
                margin-bottom: 10px;
            }

            .mod-detail-container {
                padding: 12px 14px 40px;
            }

            .mod-detail-title {
                font-size: 1.2rem;
            }

            .mod-post-item {
                padding: 12px 14px;
            }

            .header-dropdown-menu {
                left: auto;
                right: 0;
                transform: none;
            }
        }

        /* ================================================================
           ★ 新功能整合样式
           ================================================================ */

        /* —— 书签拖拽排序 —— */
        .diary-ribbon .ribbon-drag-handle {
            cursor: grab;
            margin-right: 6px;
            opacity: 0.45;
            font-size: 0.7rem;
            transition: opacity 0.2s;
        }
        .diary-ribbon:hover .ribbon-drag-handle { opacity: 0.9; }
        .diary-ribbon.dragging {
            opacity: 0.5;
            transform: translateX(-4px) scale(1.02);
        }
        .diary-ribbon.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }

        /* —— 翻页进度条 —— */
        .diary-progress-bar-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            max-width: 360px;
            margin: 0 12px;
        }
        .diary-progress-bar {
            flex: 1;
            height: 5px;
            background: rgba(213, 207, 224, 0.4);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        .diary-progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent2));
            border-radius: 3px;
            transition: width 0.3s ease;
            width: 0%;
        }
        .diary-progress-text {
            font-size: 0.72rem;
            color: var(--text2);
            font-weight: 500;
            white-space: nowrap;
            min-width: 64px;
            text-align: center;
        }
        .diary-progress-text strong { color: var(--accent); font-weight: 700; }

        /* —— 分享按钮 —— */
        .diary-share-btn {
            padding: 5px 12px;
            border-radius: 14px;
            border: 1px solid var(--accent);
            background: rgba(155, 138, 189, 0.1);
            color: var(--accent);
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }
        .diary-share-btn:hover {
            background: var(--accent);
            color: #fff;
        }

        /* —— 草稿自动保存提示 —— */
        .draft-save-tip {
            position: absolute;
            bottom: 4px;
            right: 12px;
            font-size: 0.62rem;
            color: var(--text3);
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        .draft-save-tip.show { opacity: 1; }
        .draft-save-tip .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--success);
        }

        /* —— 骨架屏 —— */
        .diary-skeleton {
            display: flex;
            gap: 12px;
            padding: 20px;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        .diary-skeleton-page {
            flex: 1;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--surface);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .sk-line {
            height: 12px;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(213,207,224,0.3) 25%, rgba(213,207,224,0.55) 50%, rgba(213,207,224,0.3) 75%);
            background-size: 200% 100%;
            animation: skShimmer 1.5s infinite;
        }
        .sk-line.short { width: 50%; }
        .sk-line.medium { width: 75%; }
        .sk-line.long { width: 100%; }
        .sk-cover {
            width: 100%;
            aspect-ratio: 460/215;
            border-radius: 8px;
            background: linear-gradient(90deg, rgba(213,207,224,0.3) 25%, rgba(213,207,224,0.55) 50%, rgba(213,207,224,0.3) 75%);
            background-size: 200% 100%;
            animation: skShimmer 1.5s infinite;
        }
        @keyframes skShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* —— 日记空状态美化 —— */
        .diary-empty-fancy {
            text-align: center;
            padding: 70px 20px;
            color: var(--text2);
        }
        .diary-empty-fancy .empty-icon-big {
            font-size: 5rem;
            display: block;
            margin-bottom: 18px;
            opacity: 0.75;
            animation: emptyFloat 3s ease-in-out infinite;
        }
        @keyframes emptyFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .diary-empty-fancy .empty-title-big {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }
        .diary-empty-fancy .empty-desc-big {
            font-size: 0.88rem;
            color: var(--text3);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        .diary-empty-fancy .empty-cta-btn {
            display: inline-block;
            padding: 10px 28px;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            color: #fff;
            border-radius: 24px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(155,138,189,0.35);
            border: none;
            transition: all 0.3s;
        }
        .diary-empty-fancy .empty-cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 28px rgba(155,138,189,0.45);
        }

        /* —— 封面统计饼图 —— */
        .diary-cover-stats-block {
            display: flex;
            gap: 24px;
            justify-content: center;
            margin: 22px auto 28px;
            flex-wrap: wrap;
            max-width: 540px;
        }
        .diary-stats-chart {
            display: flex;
            align-items: center;
            gap: 14px;
            background: rgba(250, 247, 253, 0.5);
            border: 1px solid rgba(213, 207, 224, 0.3);
            border-radius: 14px;
            padding: 12px 16px;
        }
        .diary-pie {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
        }
        .diary-pie::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 46px; height: 46px;
            background: rgba(250,247,253,0.95);
            border-radius: 50%;
            z-index: 1;
        }
        .diary-pie-center {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 2;
            white-space: nowrap;
        }
        .diary-pie-center .num {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--accent);
            line-height: 1.1;
        }
        .diary-pie-center .lbl {
            font-size: 0.55rem;
            color: var(--text3);
            line-height: 1.2;
        }
        .diary-pie-legend {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 0.7rem;
            color: var(--text2);
        }
        .diary-pie-legend .lg-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .diary-pie-legend .lg-dot {
            width: 8px; height: 8px;
            border-radius: 2px;
            flex-shrink: 0;
        }
        .diary-pie-legend .lg-count {
            margin-left: auto;
            font-weight: 600;
            color: var(--text);
        }

        /* —— 移动端滑动指示 —— */
        .swipe-hint-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.8rem;
            color: var(--accent);
            opacity: 0;
            pointer-events: none;
            z-index: 8;
            transition: opacity 0.3s;
        }
        .swipe-hint-indicator.left { left: 16px; }
        .swipe-hint-indicator.right { right: 16px; }
        .swipe-hint-indicator.show { opacity: 0.5; }

        /* —— 下拉刷新指示 —— */
        .diary-pull-refresh {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            padding: 8px 18px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 0 0 16px 16px;
            font-size: 0.78rem;
            color: var(--text2);
            z-index: 10;
            transition: transform 0.25s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: var(--shadow);
        }
        .diary-pull-refresh.show { transform: translateX(-50%) translateY(0); }
        .diary-pull-refresh .pr-icon { transition: transform 0.25s; }
        .diary-pull-refresh.flip .pr-icon { transform: rotate(180deg); }

        /* —— 游戏时长字段 —— */
        .playtime-input-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 6px;
            font-size: 0.78rem;
            color: var(--text2);
        }
        .playtime-input-row input {
            width: 60px;
            padding: 3px 8px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--surface);
            color: var(--text);
            font-family: inherit;
            font-size: 0.78rem;
        }
        .playtime-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            background: rgba(155,138,189,0.12);
            border: 1px solid rgba(155,138,189,0.25);
            border-radius: 10px;
            font-size: 0.72rem;
            color: var(--accent);
            font-weight: 600;
        }

        /* —— 工具栏响应式 —— */
        .diary-toolbar {
            gap: 8px;
            flex-wrap: wrap;
        }
        .diary-toolbar-right {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            flex-wrap: wrap;
        }
        @media (max-width: 768px) {
            .diary-progress-bar-wrap { display: none; }
            .diary-immersion-btn { display: none; }
            .diary-sound-btn { display: none; }
            .diary-share-btn { font-size: 0.72rem; padding: 4px 10px; }
            .diary-cover-stats-block { gap: 12px; }
            .diary-stats-chart { padding: 8px 10px; }
            .diary-pie { width: 64px; height: 64px; }
            .diary-pie::after { width: 38px; height: 38px; }
            .diary-pie-center .num { font-size: 0.75rem; }
            .diary-pie-center .lbl { font-size: 0.5rem; }
            .diary-pie-legend { font-size: 0.62rem; }
            .compare-games-row { flex-direction: column; }
        }