* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
        }

        body {
            background: var(--bg);
            background-attachment: fixed;
            color: var(--text);
            min-height: 100vh;
            padding: 1rem;
            line-height: 1.6;
            overflow-x: hidden;
        }

        .modern-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            padding: 0;
            min-height: calc(100vh - 120px);
        }

        /* 📱 移动端性能监控UI */
        .mobile-performance-monitor {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-family: 'Courier New', monospace;
            z-index: 10000;
            min-width: 120px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: none;
        }

        .mobile-performance-monitor.show {
            display: block;
        }

        .perf-item {
            display: flex;
            justify-content: space-between;
            margin: 2px 0;
        }

        .perf-value {
            font-weight: bold;
        }

        .perf-value.good { color: var(--success, #4ade80); }
        .perf-value.warning { color: var(--warning, #fbbf24); }
        .perf-value.danger { color: var(--danger, #f87171); }

        /* 📱 移动端触摸优化 */
        .touch-friendly {
            min-height: 44px;
            min-width: 44px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .mobile-optimized-button {
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 12px;
            border: none;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .mobile-optimized-button:active {
            transform: scale(0.98);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        }

        .mobile-optimized-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
        }

        .mobile-optimized-button:active::before {
            width: 300px;
            height: 300px;
        }

        /* 📱 移动端画笔工具优化 */
        .mobile-brush-controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: row;
            gap: 15px;
            align-items: center;
            z-index: 9999;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .mobile-brush-controls.show {
            display: flex;
        }

        .brush-size-control {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .brush-size-slider {
            width: 80px;
            height: 6px;
            border-radius: 3px;
            background: #e2e8f0;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .brush-size-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #667eea;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .brush-preview-mobile {
            width: 40px;
            height: 40px;
            border: 2px solid #e2e8f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
        }

        .brush-preview-dot {
            background: #667eea;
            border-radius: 50%;
            transition: all 0.2s ease;
        }

        @media (max-width: 768px) {
            body {
                padding: 0.75rem;
            }

            .modern-container {
                grid-template-columns: 1fr;
                gap: 1.25rem;
                min-height: calc(100vh - 100px);
                padding: 0.5rem;
            }

            .control-card,
            .preview-card {
                padding: 1.75rem;
                border-radius: 18px;
                /* 取消固定视口高度，改为随内容自适应，避免移动端预览卡片被固定 */
                min-height: auto;
                height: auto;
                box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.06);
            }

            .section-title {
                font-size: 1.3rem;
                margin-bottom: 1.25rem;
                padding: 1rem;
                text-align: center;
            }

            .action-btn {
                padding: 1.125rem 1.5rem;
                font-size: 1.05rem;
                min-height: 50px; /* 触摸友好的最小高度 */
                border-radius: 14px;
                font-weight: 600;
                width: 100%;
                transition: all 0.3s ease;
            }

            .action-btn:active {
                transform: scale(0.98);
            }

            .upload-card {
                padding: 1.75rem;
                border-radius: 16px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                transition: all 0.3s ease;
            }

            .upload-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            }

            .preview-image {
                max-height: 55vh;
                border-radius: 16px;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            }

            /* 移动端导航按钮优化 */
            .nav-prev,
            .nav-next {
                padding: 14px;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(12px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
                transition: all 0.3s ease;
                border: 2px solid rgba(255, 255, 255, 0.3);
            }

            .nav-prev:active,
            .nav-next:active {
                transform: scale(0.95);
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            }

            .nav-prev {
                left: 1.25rem;
            }

            .nav-next {
                right: 1.25rem;
            }

            .preview-info-bar {
                padding: 1.5rem 1.25rem;
                flex-direction: row;
                justify-content: space-between;
                gap: 1rem;
                align-items: center;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border-radius: 16px;
                margin: 1rem;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            }

            /* 主页面上传网格平板端样式 */
            .upload-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .button-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }


            .preview-counter {
                padding: 0.875rem 1.25rem;
                font-size: 0.95rem;
                border-radius: 14px;
                text-align: center;
                font-weight: 600;
                min-width: 80px;
                background: rgba(102, 126, 234, 0.1);
                border: 1px solid rgba(102, 126, 234, 0.2);
            }

            .face-count {
                padding: 0.875rem 1.25rem;
                font-size: 0.95rem;
                border-radius: 14px;
                text-align: center;
                font-weight: 600;
                min-width: 80px;
                background: rgba(118, 75, 162, 0.1);
                border: 1px solid rgba(118, 75, 162, 0.2);
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 0.5rem;
            }

            .modern-container {
                gap: 1rem;
                min-height: calc(100vh - 80px);
                padding: 0.25rem;
            }

            .control-card,
            .preview-card {
                padding: 1.5rem;
                border-radius: 18px;
                min-height: 115vh; /* 再次增加小屏幕容器高度 */
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 3px 12px rgba(0, 0, 0, 0.05);
            }

            .section-title {
                font-size: 1.2rem;
                margin-bottom: 1.25rem;
                padding: 0.875rem;
                text-align: center;
            }

            /* 缩小model-status span元素 */
            .model-status {
                font-size: 0.7rem !important;
                padding: 0.4rem 0.8rem !important;
                border-radius: 12px !important;
            }

            .param-label {
                font-size: 0.9rem;
            }

            .action-btn {
                padding: 1rem 1.25rem;
                min-height: 48px;
                font-size: 1rem;
                border-radius: 12px;
                font-weight: 600;
                width: 100%;
                transition: all 0.3s ease;
            }

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

            .upload-card {
                padding: 1.5rem;
                border-radius: 16px;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
                transition: all 0.3s ease;
            }

            .upload-card:active {
                transform: scale(0.98);
            }

            /* 主页面上传网格移动端样式 */
            .upload-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .button-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            /* 移动端表单控件优化 */
            .blend-mode-select select,
            .setting-select,
            .format-select {
                /* 设置内边距，上下1rem，左右0.85rem */
                padding: 1rem 0.85rem;
                /* 设置字体大小为1.05rem */
                font-size: 1.0rem;
                /* 设置最小高度为46px，确保控件有足够高度 */
                min-height: 46px;
                /* 设置圆角边框，半径为13px */
                border-radius: 13px;
                /* 设置背景图片大小为1.35rem */
                background-size: 1.35rem;
                /* 设置右侧内边距为3rem，为背景图片留出空间 */
                padding-right: 3rem;
            }

            .blend-mode-select label {
                font-size: 1.1rem;
                margin: 0 0.75rem 0 0;
            }

            /* 移动端滑块使用全局样式 */






        /* 响应式图片预览 */
        .preview-image {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }

        @media (max-width: 768px) {
            .preview-image {
                max-height: 50vh;
                max-width: 100%;
                width: auto;
                height: auto;
            }
        }

        @media (max-width: 480px) {
            .preview-image {
                max-height: 45vh;
                max-width: 100%;
                width: auto;
                height: auto;
            }
        }
        }

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
            .modern-container {
                grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
                gap: 1.5rem;
                padding: 1rem;
            }

            .control-card,
            .preview-card {
                padding: 2rem;
                border-radius: 20px;
                /* 平板端同样取消固定高度，提升适配能力 */
                min-height: auto;
                height: auto;
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
            }

            .section-title {
                font-size: 1.4rem;
                margin-bottom: 1.5rem;
                padding: 1.25rem;
            }

            /* 预览设置按钮平板端样式 */
            .settings-dropdown-container {
                margin: 12px 0;
            }

            .settings-btn {
                padding: 10px 16px;
                font-size: 13px;
                min-width: 140px;
            }

            .settings-dropdown {
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                width: 320px;
                margin-bottom: 8px;
                max-height: 70vh;
            }

            .settings-dropdown.show {
                transform: translateX(-50%) translateY(0);
            }

            /* 平板端按钮优化 */
            .action-btn {
                padding: 1.25rem 2rem;
                font-size: 1.1rem;
                min-height: 52px;
                border-radius: 16px;
                font-weight: 600;
                transition: all 0.3s ease;
            }

            .action-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }

            /* 平板端预览图片优化 */
            .preview-image {
                max-height: 65vh;
                max-width: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
                border-radius: 16px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            }

            /* 平板端预览区域导航按钮优化 */
            .nav-prev,
            .nav-next {
                padding: 14px;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(12px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
                transition: all 0.3s ease;
            }

            .nav-prev:hover,
            .nav-next:hover {
                transform: scale(1.1);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            }

            .nav-prev {
                left: 1.5rem;
            }

            .nav-next {
                right: 1.5rem;
            }

            /* 平板端预览信息栏优化 */
            .preview-info-bar {
                padding: 1.5rem 1.25rem;
                flex-direction: row;
                justify-content: space-between;
                gap: 1rem;
                align-items: center;
            }

            .preview-counter,
            .face-count {
                padding: 0.75rem 1.25rem;
                font-size: 0.9rem;
                border-radius: 14px;
                text-align: center;
                min-width: 80px;
            }

            /* 预览机页面平板端优化 */
            #previewPage .preview-image-container {
                max-height: 65vh;
                border-radius: 16px;
                margin: 1rem 0;
            }

            #previewPage .preview-image {
                max-height: 65vh;
                border-radius: 12px;
            }

            #previewPage .preview-info-bar {
                padding: 1.25rem;
                flex-direction: row;
                justify-content: space-between;
                gap: 1rem;
                align-items: center;
            }

            #previewPage .preview-counter,
            #previewPage .face-count {
                padding: 0.75rem 1.25rem;
                font-size: 0.9rem;
                border-radius: 14px;
                min-width: 80px;
            }

            /* 平板端表单控件优化 */
            .blend-mode-select select,
            .setting-select,
            .format-select {
                padding: 1.125rem 1.25rem;
                font-size: 1.05rem;
                min-height: 50px;
                border-radius: 15px;
                background-size: 1.4rem;
                padding-right: 3.25rem;
            }

            .blend-mode-select label {
                font-size: 1.05rem;
                margin: 0 0.75rem 0 0;
            }

            /* 平板端网格布局优化 */
            .upload-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 1.25rem;
            }

            .button-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.25rem;
            }

            /* 平板端滑块使用全局样式 */
        }

        .control-card {
            background: var(--surface);
            border-radius: 24px;
            padding: 2.5rem;
            box-shadow: var(--shadow-lg);
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            min-height: 80vh; /* 为桌面端增加容器高度 */
        }

        .preview-card {
            background: var(--surface);
            border-radius: 24px;
            padding: 2.5rem;
            box-shadow: var(--shadow-lg);
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            min-height: 110vh; /* 再次增加桌面端容器高度 */
        }

        .control-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        }

        /* 移除大卡片悬停动画效果：保持与常态一致 */
        .control-card:hover {
            transform: none;
            box-shadow: var(--shadow-lg);
            border-color: rgba(255, 255, 255, 0.25);
        }

        .section-title {
            font-size: 1.6rem;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.2rem 0;
            position: relative;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
            border-radius: 12px;
            padding: 1.5rem 1.2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .section-title .model-status {
            margin-left: auto;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            border-radius: 2px;
            opacity: 0.8;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
            animation: shimmer 2s ease-in-out infinite alternate;
        }

        @keyframes shimmer {
            0% {
                opacity: 0.6;
                transform: scaleX(0.8);
            }
            100% {
                opacity: 1;
                transform: scaleX(1);
            }
        }

        .section-title i {
            color: #667eea;
            font-size: 1.4rem;
            text-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
            animation: iconGlow 3s ease-in-out infinite alternate;
        }

        @keyframes iconGlow {
            0% {
                filter: drop-shadow(0 2px 4px rgba(240, 147, 251, 0.4));
                transform: scale(1);
            }
            100% {
                filter: drop-shadow(0 4px 8px rgba(240, 147, 251, 0.6));
                transform: scale(1.05);
            }
        }

        .upload-card {
            background: rgba(255, 255, 255, 0.08);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            position: relative;
            overflow: hidden;
            color: #1a202c;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            min-height: 180px;
            width: 100%;
            max-width: 300px;
        }

        .upload-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transform: rotate(-45deg);
            transition: all 0.6s ease;
            opacity: 0;
        }

        /* 取消上传卡片悬停动画（保持常态外观） */
        .upload-card:hover {
            border-color: rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.08);
            transform: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .upload-card:hover::before { opacity: 0; transform: none; }

        .upload-label {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1.5rem;
            box-sizing: border-box;
        }

        .upload-icon {
            font-size: 2rem;
            color: #667eea;
            transition: all 0.3s ease;
            display: block;
            line-height: 1;
            margin: 0;
        }

        .upload-card:hover .upload-icon {
            color: #764ba2;
            transform: scale(1.1);
        }

        .file-status {
            font-size: 0.85rem;
            color: #666;
            margin-top: 0.25rem;
        }

        .param-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
            color: #1a202c;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .range-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background-color: #4158d0;
            background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
            outline: none;
            opacity: 0.7;
            transition: opacity 0.2s ease;
            cursor: pointer;
        }

        .range-slider:hover,
        .range-slider:focus {
            opacity: 1;
        }

        .range-slider::-webkit-slider-runnable-track {
            height: 8px;
            border-radius: 4px;
            background-color: #4158d0;
            background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
        }

        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #ff4f8b;
            background-image: linear-gradient(135deg, #ff4f8b 0%, #ff784f 50%, #ffc84f 100%);
            cursor: pointer;
            border: none;
            margin-top: -4px;
            box-shadow: 0 3px 8px rgba(255, 111, 89, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
        }

        .range-slider::-moz-range-track {
            height: 8px;
            border-radius: 4px;
            background-color: #4158d0;
            background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
            border: none;
        }

        .range-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #ff4f8b;
            background-image: linear-gradient(135deg, #ff4f8b 0%, #ff784f 50%, #ffc84f 100%);
            cursor: pointer;
            border: none;
            transform: translateY(-4px);
            box-shadow: 0 3px 8px rgba(255, 111, 89, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s ease;
        }

        /* 基础按钮样式 - 所有按钮的基础 */
        .btn-base {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            font-family: 'Inter', system-ui, sans-serif;
        }

        /* 按钮悬停时的波纹效果 */
        .btn-base::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.4);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%, -50%);
            transform-origin: 50% 50%;
        }

        .btn-base:hover::after {
            animation: ripple 1s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(100, 100);
                opacity: 0;
            }
        }

        /* 主要操作按钮样式 */
        .action-btn {
            width: 100%;
            padding: 1.2rem 1.8rem;
            background: var(--brand-gradient);
            color: var(--accent-contrast);
            border-radius: var(--radius-lg);
            margin: 0.75rem 0;
            font-size: 1rem;
            font-weight: 600;
            box-shadow: var(--button-shadow, var(--shadow-lg));
            position: relative;
            overflow: hidden;
        }

        .action-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
            background: var(--brand-gradient-hover, linear-gradient(135deg, #5a67d8 0%, #6b46c1 50%, #ec4899 100%));
        }

        /* 危险操作按钮（统一样式） */
        .btn-danger {
            /* 对应 Tailwind: cursor-pointer transition-all bg-red-400 text-white px-5 py-2 rounded-lg border-b-4 border-red-900 */
            cursor: pointer;
            transition: all .18s ease;
            background: #f87171; /* red-400 */
            color: #ffffff; /* text-white */
            padding: 0.5rem 1.25rem; /* py-2 px-5 */
            border-radius: 0.5rem; /* rounded-lg */
            border: 0; /* 清除默认边框 */
            border-bottom: 4px solid #f87171; /* red-900 */
            filter: brightness(1);
            transform: translateY(0);
            user-select: none;
        }
        .btn-danger:hover {
            /* hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[6px] */
            filter: brightness(1.1);
            transform: translateY(-1px);
            border-bottom-width: 6px;
        }
        .btn-danger:active {
            /* active:border-b-[2px] active:brightness-90 active:translate-y-[2px] */
            filter: brightness(0.9);
            transform: translateY(2px);
            border-bottom-width: 2px;
        }

        /* 轻量蓝色操作按钮（用于管理头像等辅助操作） */
        .btn-soft-blue {
            cursor: pointer;
            transition: all .18s ease;
            background: #60a5fa; /* light blue */
            color: #ffffff;
            padding: 0.5rem 1.25rem;
            border-radius: 0.5rem;
            border: 0;
            border-bottom: 4px solid #3b82f6;
            filter: brightness(1);
            transform: translateY(0);
            user-select: none;
        }
        .btn-soft-blue:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
            border-bottom-width: 6px;
        }
        .btn-soft-blue:active {
            filter: brightness(0.92);
            transform: translateY(2px);
            border-bottom-width: 2px;
        }


        .action-btn:hover::before {
            left: 100%;
        }

        .action-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
        }

/* 次级操作按钮（与 .action-btn 同体系的次级风格） */
.action-btn.action-btn--secondary {
  background: transparent;
  color: var(--text-secondary, #4b5563);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.action-btn.action-btn--secondary:hover {
  transform: translateY(-2px);
  background: rgba(99, 102, 241, 0.06); /* 品牌轻色呼应 */
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--text, #1f2937);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.action-btn.action-btn--secondary:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.action-btn.action-btn--secondary:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.action-btn.action-btn--secondary i { margin-right: 6px; }


        .preview-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 24px;
            padding: 2.5rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
        }

        /* 取消 preview-card 悬停动画 */
        .preview-card:hover {
            transform: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .preview-image {
            width: 100%;
            height: auto;
            max-height: 70vh;
            border-radius: 8px;
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 8px;
            z-index: 10;
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #555;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin-bottom: 1rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .progress-container {
            width: 100%;
            margin: 1rem 0;
        }

        .progress-bar {
            height: 10px;
            width: 100%;
            background: var(--track-bg);
            border-radius: 5px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--brand-gradient);
            width: 0%;
            transition: width 0.3s;
            will-change: width;
        }
        /* 通用淡出动画，用于进度容器 */
        .fade-out {
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }


        .nav-prev, .nav-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.95);
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            padding: 0;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
            cursor: pointer;
            z-index: 15;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(12px);
            transition-delay: 0.05s;
        }

        .nav-prev i, .nav-next i {
            font-size: 1.2rem;
            color: #667eea;
            transition: all 0.3s ease;
        }

        .nav-prev:hover, .nav-next:hover {
            transform: translateY(-50%) scale(1.08);
            border-color: rgba(102, 126, 234, 0.5);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(102, 126, 234, 0.1);
            background: rgba(255, 255, 255, 1);
        }

        .nav-prev:hover i, .nav-next:hover i {
            color: #764ba2;
            transform: scale(1.05);
        }

        .nav-prev:active, .nav-next:active {
            transform: translateY(-50%) scale(0.95);
        }

        .nav-prev {
            left: 1rem;
        }

        .nav-next {
            right: 1rem;
        }

        .file-meta {
            display: flex;
            justify-content: flex-end;
            margin: 1rem 0;
            font-size: 0.875rem;
            color: var(--text-secondary, #6b7280);
        }

        .section-title .upload-icon {
            font-size: 1.25rem;
        }

        /* 通用选择控件样式 */
        select {
            display: block;
            width: 100%;
            padding: var(--select-padding-y) calc(var(--select-padding-x) + 1.5rem);
            border-radius: var(--select-radius);
            border: 1px solid var(--select-border);
            background-color: var(--select-bg);
            color: var(--select-text);
            font-size: var(--select-font-size);
            line-height: 1.4;
            box-shadow: var(--select-shadow);
            transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
            appearance: none;
            background-image: var(--select-chevron);
            background-repeat: no-repeat;
            background-position: right var(--select-padding-x) center;
            background-size: var(--select-chevron-size);
            cursor: pointer;
            min-height: calc(var(--select-padding-y) * 2 + 1.4em);
        }

        select:hover {
            border-color: var(--select-border-hover);
            box-shadow: var(--select-shadow-hover);
            background-color: var(--select-bg-hover);
        }

        select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: var(--focus-ring);
            background-color: var(--select-bg-hover);
        }

        select:active {
            background-color: var(--select-bg-active);
            box-shadow: var(--select-shadow);
        }

        select:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            box-shadow: none;
        }

        .blend-mode-select {
            margin: 0.5rem 0; /* 进一步收紧上下间距 */
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

        .blend-mode-select label {
            display: inline-flex;
            align-items: center;
            margin: 0 0.75rem 0 0;
            color: #2d3748;
            font-weight: 600;
            font-size: 1rem;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .blend-mode-select select {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            max-width: 100%;
        }

        .blend-mode-select--switch {
            justify-content: space-between;
            width: 100%;
            gap: 0.75rem;
        }

        .blend-mode-select--switch .switch-text {
            display: flex;
            align-items: center;
            color: #2d3748;
            font-weight: 600;
            font-size: 1rem;
            flex: 1 1 auto;
            cursor: pointer;
        }

        .blend-mode-select--switch .switch {
            flex: 0 0 auto;
        }

        /* 通用select选项样式优化 */
        select option {
            background: var(--select-bg);
            color: var(--select-text);
        }

        select option:hover,
        select option:checked {
            background: rgba(102, 126, 234, 0.12);
            color: var(--select-text);
        }

        /* 开关按钮样式 */
        .switch {
            font-size: 14px;
            position: relative;
            display: inline-block;
            width: 2.4em;
            height: 1.3em;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgb(182, 182, 182);
            transition: 0.3s;
            border-radius: 0.9em;
        }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 0.9em;
            width: 0.9em;
            border-radius: 0.8em;
            left: 0.2em;
            bottom: 0.2em;
            background-color: rgb(255, 255, 255);
            transition: 0.3s;
        }

        .switch input:checked + .slider {
            background-color: #21cc4c;
        }

        .switch input:focus + .slider {
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35);
        }

        .switch input:checked + .slider:before {
            transform: translateX(1.1em);
        }

        /* 人脸检测框样式 */
        .face-box {
            position: absolute;
            border: 2px solid #555;
            background-color: rgba(85, 85, 85, 0.1);
            pointer-events: none;
        }

        /* 模型状态栏样式 */
        .model-status-bar {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            text-align: center;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        /* 模型状态指示器样式 */
        .model-status {
            font-size: 0.95rem;
            font-weight: 600;
            padding: 0.8rem 1.4rem;
            border-radius: 20px;
            margin: 0;
            background: linear-gradient(135deg, #f7fafc, #edf2f7);
            color: #2d3748;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            border: 2px solid rgba(45, 55, 72, 0.1);
        }

        .model-status.loaded {
            background: var(--success-gradient, linear-gradient(135deg, #48bb78, #38a169));
            color: white;
            box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
        }

        .model-status.loading {
            background: var(--info-gradient, linear-gradient(135deg, #4299e1, #3182ce));
            color: white;
            box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
            animation: pulse 2s infinite;
        }

        .model-status.warning {
            background: var(--warning-gradient, linear-gradient(135deg, #f59e0b, #d97706));
            color: white;
            box-shadow: 0 4px 15px rgba(237, 137, 54, 0.3);
        }

        .model-status.error {
            background: var(--danger-gradient, linear-gradient(135deg, #f56565, #e53e3e));
            color: white;
            box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3);
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .preview-info-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem 2rem 2rem;
            background: transparent;
            border-radius: 0 0 20px 20px;
            margin-top: 0;
            position: relative;
        }



        .preview-counter {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            color: #2d3748;
            padding: 0.75rem 1.25rem;
            border-radius: 16px;
            font-size: 0.9rem;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .preview-counter:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
        }

        .face-count {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            color: #2d3748;
            padding: 0.75rem 1.25rem;
            border-radius: 16px;
            font-size: 0.9rem;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .face-count:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
        }

        .face-count.detected {
            background: var(--success-gradient, linear-gradient(135deg, rgba(72, 187, 120, 0.9), rgba(56, 161, 105, 0.9)));
            color: white;
            border: 1px solid rgba(72, 187, 120, 0.3);
            box-shadow: 0 4px 20px rgba(72, 187, 120, 0.2);
        }

        .face-count.detected:hover {
            box-shadow: 0 6px 25px rgba(72, 187, 120, 0.3);
        }

        .face-count.error {
            background: var(--danger-gradient, linear-gradient(135deg, rgba(245, 101, 101, 0.9), rgba(229, 62, 62, 0.9)));
            color: white;
            border: 1px solid rgba(245, 101, 101, 0.3);
            box-shadow: 0 4px 20px rgba(245, 101, 101, 0.2);
        }

        .face-count.error:hover {
            box-shadow: 0 6px 25px rgba(245, 101, 101, 0.3);
        }

        .param-group {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        /* 添加action-group样式 */
        .action-group {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 1.5rem;
        }

        /* 上传区域网格布局 */
        .upload-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .upload-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
        }

        .upload-item .upload-card {
            margin-bottom: 0;
            width: 100%;
        }

        .clear-upload-btn {
            width: auto;           /* 收窄为内容自适应 */
            max-width: none;       /* 取消最大宽度限制 */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            white-space: nowrap;   /* 文案不换行 */
        }

        /* 按钮组网格布局 */
        .button-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .button-grid .action-btn {
            margin: 0;
        }

        /* 添加画笔工具样式 */
        .brush-tools {
            display: none;
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .brush-tools.active {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .brush-size {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.5rem;
        }

        .brush-size input {
            flex: 1;
        }

        .brush-size span {
            min-width: 3rem;
            text-align: right;
        }



        .brush-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        /* 刷子工具按钮样式 */
        .brush-btn {
            flex: 1;
            padding: 0.5rem;
            border-radius: 8px;
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
            color: white;
            font-size: 0.9rem;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(75, 85, 99, 0.3);
        }

        .brush-btn:hover {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
        }

        .brush-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(75, 85, 99, 0.3);
        }

        .brush-btn.undo {
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        }

        .brush-btn.undo:hover {
            background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }

        .brush-btn.clear {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
        }

        .brush-btn.clear:hover {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

        .preview-content {
            position: relative;
            cursor: crosshair;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            touch-action: auto;
        }

        .preview-content.brush-mode {
            cursor: crosshair;
            touch-action: none;
        }

        .preview-content.brush-mode .preview-image {
            pointer-events: none;
        }

        /* 底部导航栏样式 - 简约卡片设计 */
        .bottom-nav {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 16px;
            z-index: 1000;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            gap: 4px;
            max-width: calc(80vw + 10px);
            width: auto;
            min-width: 320px;
            /* iOS/Android 手势区安全留白，避免被系统条遮挡 */
            padding-bottom: calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        }

        .nav-item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--text-secondary, #6b7280);
            padding: 8px 16px;
            transition: all 0.2s ease;
            border-radius: 12px;
            position: relative;
            background: rgba(255, 255, 255, 0.6);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.7);
            min-width: 60px;
            cursor: pointer;
        }

        .nav-item:hover {
            background: var(--accent-10, rgba(102, 126, 234, 0.1));
            color: var(--accent);
        }

        /* 简化的点击效果 */
        .nav-item:active {
            transform: scale(0.95);
            transition: all 0.1s ease;
        }

        /* 简化的点击动画 */
        .nav-item.clicked {
            animation: simpleClick 0.2s ease;
        }

        @keyframes simpleClick {
            0% { transform: scale(0.95); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        .nav-item.active {
            color: var(--accent);
            background: var(--accent-15, rgba(102, 126, 234, 0.15));
            border: 1px solid var(--accent-30, rgba(102, 126, 234, 0.3));
            font-weight: 600;
        }

        .nav-item span {
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            text-align: center;
            color: inherit;
        }

        .nav-item.active span {
            font-weight: 600;
        }

        /* 移动端适配 */
        @media (max-width: 480px) {
            .bottom-nav {
                bottom: 16px;
                padding: 6px 12px;
                gap: 2px;
                /* 移动端：增加安全区底部留白 */
                padding-bottom: calc(6px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
            }

            .nav-item {
                padding: 6px 12px;
                min-width: 50px;
            }

            .nav-item span {
                font-size: 0.8rem;
            }

            .nav-item span {
                font-size: 0.7rem;
            }
        }

        /* 超小屏幕适配 - 确保文字单行显示 */
        @media (max-width: 412px) {
            .bottom-nav {
                max-width: calc(95vw + 10px);
                padding: 6px 8px;
                gap: 1px;
            }

            .nav-item {
                padding: 6px 8px;
                min-width: 48px; /* 更小的最小宽度，减少换行概率 */
                white-space: nowrap;
            }

            .nav-item span {
                font-size: 0.65rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            #previewPage .upload-card h3 {
                font-size: 0.85rem;
                margin-bottom: 0.4rem;
            }
        }

        /* 底部导航：优先单行显示，必要时滚动，极小屏才允许换行 */
        .bottom-nav {
            flex-wrap: nowrap;            /* 默认不换行 */
            overflow-x: auto;             /* 超出时横向滚动，避免折行 */
            -webkit-overflow-scrolling: touch; /* 移动端流畅滚动 */
            scrollbar-width: none;        /* 隐藏滚动条（Firefox） */
        }
        .bottom-nav::-webkit-scrollbar { display: none; } /* 隐藏滚动条（WebKit） */

        /* 导航项与文字保持单行 */
        .nav-item,
        .nav-item span { white-space: nowrap; }

        /* 极小屏幕（如超窄设备）才允许换行以避免遮挡 */
        @media (max-width: 340px) {
            .bottom-nav { flex-wrap: wrap; overflow-x: visible; }
        }

        /* 页面容器样式 */
        .page-container {
            display: none;
            opacity: 0;
            transform: translateX(20px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .page-container.active {
            display: block;
            opacity: 1;
            transform: translateX(0);
        }

        /* 确保预览机页面的导航按钮不受页面切换影响 */
        .page-container.active #previewPage .nav-container {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            gap: 1rem !important;
        }

        .page-container.active #previewPage .nav-btn {
            width: 50px !important;
            height: 50px !important;
            min-width: 50px !important;
            min-height: 50px !important;
            max-width: 50px !important;
            max-height: 50px !important;
            flex-shrink: 0 !important;
            flex-grow: 0 !important;
            border-radius: 50% !important;
        }

        /* 预览机页面样式 */
        .preview-machine {
            padding: 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .preview-machine .section-title {
            margin-bottom: 1rem;
            text-align: center;
        }

        .preview-content {
            background: #ffffff;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 通用预览舞台样式 - 确保有初始尺寸 */
        /* 预览舞台（默认自适应）
           调整为宽度填满容器，高度按比例自适应，避免在移动端固定像素导致溢出 */
        .preview-stage {
            position: relative;
            width: 100%;              /* 容器宽度自适应 */
            height: auto;             /* 高度由内容(画布/图片)决定 */
            --preview-aspect: 1 / 1;   /* 默认保持正方形占位 */
            aspect-ratio: var(--preview-aspect, 1 / 1);
            min-width: 0;
            min-height: 0;
            margin: 0 auto;
            background: #f8f9fa;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        /* 预览画布样式 */
        #compositeCanvas {
            display: block;
            /* 画布显示尺寸改为自适应，由 JS 计算设置具体像素尺寸；
               这里提供安全的默认值，避免首次渲染突兀的固定 400px */
            width: 100%;
            height: 100%;
            max-width: 100%;
            /* 默认允许纵向滚动，避免触摸起点在画布上阻断页面滚动 */
            touch-action: pan-y;
            cursor: default;
            margin: 0 auto;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }

        /* 在刷子/手动擦除模式下，禁止浏览器默认手势，保证绘制不中断 */
        .preview-content.brush-mode #compositeCanvas {
            touch-action: none;
        }

        /* 移动端响应式调整 */
        /* 小屏不再强制固定像素，交由容器宽度与 JS 计算控制 */
        @media (max-width: 768px) { #compositeCanvas { width: 100%; height: auto; } }
        @media (max-width: 480px) { #compositeCanvas { width: 100%; height: auto; } }

        /* 预览机特定的预览舞台样式 */
        #previewPage .preview-stage {
            position: relative;
            width: 100%;
            min-height: 0;
            margin: 1.5rem auto;
            background: #f8f9fa;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 0;
        }

        /* 预览舞台内的导航按钮定位 */
        #previewPage .preview-stage .nav-btn {
            position: relative;
            z-index: 10;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        #previewPage .preview-stage .nav-btn:hover {
            background: rgba(255, 255, 255, 1);
            border-color: #4f46e5;
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
        }

        #previewPage .preview-stage .nav-btn i {
            font-size: 1.2rem;
            color: #4f46e5;
        }

        /* 设备预览模式样式 - 完全适配模板原始尺寸 */
        #previewPage .preview-stage.device-square,
        #previewPage .preview-stage.device-phone-portrait,
        #previewPage .preview-stage.device-ipad-landscape,
        #previewPage .preview-stage.device-desktop {
            width: auto;
            height: auto;
            border-radius: 12px;
        }

        #previewPage .preview-stage.device-square {
            --preview-aspect: 1 / 1;
        }

        #previewPage .preview-stage.device-phone-portrait {
            --preview-aspect: 9 / 16;
            border-radius: 20px;
        }

        #previewPage .preview-stage.device-ipad-landscape {
            --preview-aspect: 4 / 3;
            border-radius: 16px;
        }

        #previewPage .preview-stage.device-desktop {
            --preview-aspect: 16 / 9;
            border-radius: 8px;
        }

        /* 设备标签样式 */
        .device-label {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #333, #555);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        /* 确保宽屏预览模式的容器能完整显示 */
        #previewPage .preview-content {
            overflow-x: auto;
            overflow-y: visible;
        }

        /* 为宽屏模式添加额外的边距 */
        #previewPage .preview-stage.device-ipad-landscape,
        #previewPage .preview-stage.device-desktop {
            margin: 2rem auto;
        }

        /* 滚动提示样式 */
        .scroll-hint {
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 0.7rem;
            white-space: nowrap;
            animation: fadeInOut 3s infinite;
            z-index: 10;
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* 预览页面内容区域 */
        #previewPage .preview-content {
            padding: 1.5rem;
            width: 100%;
            max-width: 100%;
        }

        /* 导航按钮居左对齐 */
        #previewPage .nav-container {
            display: flex;
            justify-content: center;
            width: 100%;
            margin: 1rem 0;
            gap: 1rem;
        }

        /* 导航按钮样式 */
        #previewPage .nav-btn {
            width: 56px;
            height: 56px;
            min-width: 56px;
            min-height: 56px;
            max-width: 56px;
            max-height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 1.6rem;
            flex-shrink: 0;
            flex-grow: 0;
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        #previewPage .nav-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #previewPage .nav-btn:hover::before {
            opacity: 1;
        }

        #previewPage .nav-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4), 0 6px 12px rgba(0, 0, 0, 0.15);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

        #previewPage .nav-btn:active {
            transform: translateY(-1px) scale(0.98);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #previewPage .nav-btn:disabled {
            background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
            opacity: 0.6;
            border-color: rgba(255, 255, 255, 0.1);
        }

        #previewPage .nav-btn:disabled::before {
            display: none;
        }

        /* 批量控制按钮左对齐 */
        #previewPage .batch-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            width: 100%;
            margin: 1.5rem 0;
        }

        /* 预览机模式选择器样式 - 与导出按钮保持一致 */
        #previewPage .preview-mode-selector {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            height: 56px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        #previewPage .preview-mode-selector::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #previewPage .preview-mode-selector:hover::before {
            opacity: 1;
        }

        #previewPage .preview-mode-selector:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3), 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        #previewPage .preview-mode-selector:active {
            transform: translateY(0px);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #previewPage .preview-mode-selector label {
            color: white;
            font-size: 1rem;
            font-weight: 600;
            white-space: nowrap;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 1;
        }

        #previewPage .preview-mode-selector label:before {
            content: '\f03a'; /* 图片图标 */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: 0.75rem;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        #previewPage .mode-select {
            position: relative;
            z-index: 1;
            min-width: 120px;
            height: auto;
            --select-padding-y: 0.75rem;
            --select-padding-x: 1rem;
        }
@media (max-width: 480px) {
    body {
        padding: 0.25rem;
    }

    .modern-container {
        gap: 0.75rem;
    }

    .control-card,
    .preview-card {
        padding: 1rem;
        border-radius: 16px;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
    }

    .preview-card {
        max-height: none;
        overflow: visible;
        min-height: auto;
    }

    .preview-image {
        max-height: 45vh;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
    }

    .section-title {
        font-size: 1rem;
        margin-bottom: 1rem;
        padding: 1rem 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-wrap: nowrap;
    }

    .preview-info-bar {
        padding: 1rem 0.75rem;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        margin: 0.5rem 0;
    }

    .face-count,
    .preview-counter {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .param-label {
        font-size: 0.9rem;
    }

    .action-btn {
        padding: 0.875rem;
        min-height: 44px;
    }


/* Preview meta: two-column grid (no separators) */
.preview-meta {
    /* container keeps existing inline font-size/color from HTML */
}
.preview-meta .meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    column-gap: 16px;
    align-items: baseline;
}
.preview-meta .meta-row > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-meta .meta-row > span:first-child {
    text-align: left;   /* left column left-aligned */
}
.preview-meta .meta-row > span:last-child {
    text-align: right;  /* right column right-aligned */
}
.preview-meta .info-sep { display: none; }

/* Preview meta bar style (方案三) */
.preview-meta-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 30px;
    padding: 6px 12px;
    margin-top: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.preview-meta-bar .meta-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
}


.preview-meta-bar .stat-label {
    font-size: 10px;
    color: #64748b;
}

.preview-meta-bar .stat-value {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

.preview-meta-bar .divider {
    width: 1px;
    height: 30px;
    background: #cbd5e1;
}

/* Mobile-specific adjustments for preview-meta */
@media (max-width: 768px) {
  .preview-meta { font-size: 11px; }
  .preview-meta .meta-row { column-gap: 10px; }

  .preview-meta-bar {
    padding: 5px 10px;
    margin-top: 10px;
    max-width: 95%;
  }


  .preview-meta-bar .stat-label {
    font-size: 9px;
  }

  .preview-meta-bar .stat-value {
    font-size: 11px;
  }

  .preview-meta-bar .divider {
    height: 25px;
  }
}

@media (max-width: 480px) {
  .preview-meta { font-size: 10px; padding: 6px 6px !important; }
  .preview-meta .meta-row { grid-template-columns: auto 1fr; column-gap: 8px; }
  .preview-meta .meta-row > span { max-width: 45vw; }

  .preview-meta-bar {
    padding: 4px 8px;
    margin-top: 8px;
    max-width: 98%;
  }


  .preview-meta-bar .stat-label {
    font-size: 8px;
  }

  .preview-meta-bar .stat-value {
    font-size: 10px;
  }

  .preview-meta-bar .divider {
    height: 20px;
  }
}

    .upload-card {
        padding: 1.25rem;
    }


/* Ultra-small screens (<=320px) for preview-meta */
@media (max-width: 320px) {
  .preview-meta { font-size: 9px; padding: 4px 6px !important; }
  .preview-meta .meta-row { grid-template-columns: auto 1fr; column-gap: 6px; }
  .preview-meta .meta-row > span { max-width: 42vw; }
}

/* Dark mode adjustments for preview-meta */
@media (prefers-color-scheme: dark) {
  .preview-meta { color: #ddd !important; }
  .preview-meta .meta-row > span { color: inherit; }
}

    /* 移动端导航按钮优化 - 主体一致化 */
    .nav-prev, .nav-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-prev i, .nav-next i {
        font-size: 14px;
        color: #667eea;
        transition: all 0.2s ease;
    }

    .nav-prev {
        left: 0.75rem;
    }

    .nav-next {
        right: 0.75rem;
    }

    /* 触控友好的触控区域扩大 */
    .nav-prev::after,
    .nav-next::after {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        border-radius: 50%;
        z-index: -1;
    }

    .nav-prev:active, .nav-next:active {
        transform: translateY(-50%) scale(0.95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        background: rgba(245, 247, 250, 0.98);
    }

    /* 预览区域样式增强 */
    .preview-card .nav-prev,
    .preview-card .nav-next {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* 预览机页面的导航按钮一致性 */
    .nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
    }
}

        #previewPage .mode-select:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(255, 255, 255, 0.5);
        }

        #previewPage .mode-select:focus {
            outline: none;
            background: #ffffff;
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
        }

        #previewPage .mode-select option {
            background: white;
            color: #1f2937;
            padding: 0.5rem;
            font-weight: 500;
        }

        /* 预览机格式选择器样式 - 与导出按钮保持一致 */
        #previewPage .format-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: linear-gradient(135deg, #333, #eee);
            border-radius: 12px;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease,
                        box-shadow 0.3s ease;
            height: 48px;
            box-sizing: border-box;
        }

        #previewPage .format-selector:hover {
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        #previewPage .format-selector:active {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #previewPage .format-selector label {
            color: white;
            font-size: 1rem;
            font-weight: 500;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        #previewPage .format-selector label:before {
            content: '\f1c5'; /* 文件类型图标 */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: 0.5rem;
        }

        #previewPage .format-select {
            min-width: 120px;
            height: auto;
            --select-padding-y: 0.75rem;
            --select-padding-x: 1rem;
        }

        #previewPage .format-select option {
            background: white;
            color: #1f2937;
            padding: 0.5rem;
            font-weight: 500;
        }

        /* 导出按钮样式 */
        #previewPage .export-btn {
            width: auto;
            padding: 1.2rem 1.8rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            color: white;
            border: none;
            border-radius: 16px;
            margin: 0.75rem 0.75rem 0.75rem 0;
            font-size: 1rem;
            font-weight: 600;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #previewPage .export-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        #previewPage .export-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 50%, #ec4899 100%);
        }

        #previewPage .export-btn:hover::before {
            left: 100%;
        }

        #previewPage .export-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
        }

        #previewPage .export-btn:disabled {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 6px rgba(156, 163, 175, 0.3);
            opacity: 0.7;
        }

        /* 头像计数器样式优化 */
        #previewPage .file-counter {
            text-align: center;
            padding: 0.5rem;
            margin-top: 0.5rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
            border-radius: 8px;
            font-size: 0.9rem;
            color: #1a202c;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12);
        }

        /* 桌面端预览机布局 */
        #previewPage .preview-machine {
            padding: 2rem 1rem;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            min-height: calc(100vh - 120px);
            display: flex;
            flex-direction: column;
        }

        /* 预览机内容区域布局 */
        #previewPage .preview-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* 确保组件正确显示 */
        #previewPage .preview-hint,
        #previewPage .nav-container,
        #previewPage .preview-stage,
        #previewPage .batch-controls {
            flex-shrink: 0;
        }

        /* 预览提示样式 */
        #previewPage .preview-hint {
            text-align: center;
            padding: 2rem;
            color: var(--text-secondary, #6b7280);
            font-style: italic;
            display: none;
        }

        #previewPage .preview-hint.show {
            display: block;
        }

        /* 预览机上传区域沿用全局 .upload-grid 设置，保持与贴膜机一致 */

        /* 优化预览机的上传卡片样式 */
        #previewPage .upload-card {
            padding: 2.5rem;
            text-align: center;
            border: 2px dashed rgba(102, 126, 234, 0.35);
            border-radius: 16px;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
            box-shadow: 0 6px 18px rgba(102, 126, 234, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

        /* 预览机上传卡片取消悬停动画与高亮 */
        #previewPage .upload-card:hover {
            border-color: rgba(102, 126, 234, 0.35);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
            transform: none;
            box-shadow: 0 6px 18px rgba(102, 126, 234, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        #previewPage .upload-card:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(124, 58, 237, 0.45) 50%, rgba(109, 40, 217, 0.9) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #previewPage .upload-card:hover:after { opacity: 0; }

        /* 美化选择头像和选择模板的标题和图标 */
        #previewPage .upload-card h3 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: #2d3748;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            text-align: center;
            flex-direction: column;
            font-weight: 600;
        }

        #previewPage .upload-card h3:before {
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 2.5rem;
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            display: block;
        }

        #avatarUploadCard h3:before {
            content: '\f007'; /* 用户头像图标 */
        }

        #frameUploadCard h3:before {
            content: '\f302'; /* 模板图标 */
        }

        /* 上传按钮样式 */
        #previewPage .upload-button {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            border-radius: 25px;
            padding: 0.75rem 1.5rem;
            font-size: 0.95rem;
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
            display: inline-flex;
            gap: 8px;
            margin: 0.75rem auto;
            font-weight: 500;
            position: relative;
            overflow: hidden;
        }

        /* 预览机：全屏水印（仅预览机）上传卡片与“选择模板”卡片尺寸一致 */
        #previewPage #previewWatermarkSection .upload-card,
        #previewPage #previewWatermarkUploadCard {
            min-height: 180px; /* 与全局 .upload-card 一致，确保高度统一 */
            max-width: 300px;  /* 与模板卡片一致 */
            width: 100%;
            padding: 2.5rem;   /* 统一内边距 */
            margin-bottom: 0.75rem;
        }

        /* 预览机：管理水印按钮增加间距 */
        #previewPage #managePreviewWatermarkBtn {
            margin-top: 12px !important;
        }

        #previewPage .upload-button:before {
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            content: '\f093'; /* 上传图标 */
        }

        #previewPage .upload-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        }

        #previewPage .upload-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }

        #previewPage .upload-button:after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.15);
            transform: rotate(30deg);
            transition: transform 0.6s ease;
        }

        #previewPage .upload-button:hover:after {
            transform: rotate(30deg) translate(10%, 10%);
        }

        #previewPage .upload-button:disabled {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 6px rgba(156, 163, 175, 0.3);
            opacity: 0.7;
        }

        /* 优化预览机标题和图标 */
        #previewPage .section-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 1.2rem;
            position: relative;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 隐藏预览机文件输入框 */
        #previewPage input[type="file"] {
            display: none;
        }

        #previewPage .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            border-radius: 2px;
            opacity: 0.7;
            box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
            animation: shimmer 2s ease-in-out infinite alternate;
        }

        #previewPage .section-title i {
            font-size: 1.5rem;
            color: #667eea;
            text-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
            animation: iconGlow 3s ease-in-out infinite alternate;
        }

        /* 优化文件计数器样式 */
        #previewPage .file-counter {
            text-align: center;
            padding: 0.6rem;
            margin-top: 0.75rem;
            background: linear-gradient(135deg, rgba(51, 51, 51, 0.1), rgba(238, 238, 238, 0.1));
            border-radius: 20px;
            font-size: 0.9rem;
            color: #333;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        /* Toast提示动画样式 */
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideOutRight {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }

        .toast {
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
            font-weight: 500;
            letter-spacing: 0.025em;
        }

        /* 用户中心样式优化 - 现代卡片设计 */
        .user-profile {
            background: var(--surface);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            border: 1px solid var(--border, rgba(229, 231, 235, 0.6));
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            min-height: 600px;
            backdrop-filter: blur(20px);
        }

        .user-profile::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #10b981, #f59e0b);
            background-size: 400% 100%;
            animation: gradientFlow 8s ease-in-out infinite;
        }

        @keyframes gradientFlow {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 100% 50%; }
            50% { background-position: 200% 50%; }
            75% { background-position: 300% 50%; }
        }

        /* 移除 user-profile 卡片悬停动画效果 */
        .user-profile:hover {
            transform: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
        }

        .user-info {
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
        }

        .user-header {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            padding: 3rem 2.5rem 2.5rem;
            background: var(--brand-gradient);
            color: var(--accent-contrast);
            position: relative;
            overflow: hidden;
        }

        .user-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
            backdrop-filter: blur(10px);
        }

        .user-header::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: floatingOrb 20s linear infinite;
        }

        @keyframes floatingOrb {
            0% { transform: rotate(0deg) translate(-50%, -50%); }
            100% { transform: rotate(360deg) translate(-50%, -50%); }
        }

        .user-header > * {
            position: relative;
            z-index: 2;
        }

        .user-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
            padding: 2.5rem 2.5rem 3rem;
            box-sizing: border-box;
        }

        .user-avatar {
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.2);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .user-avatar::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #6366f1, #8b5cf6, #06b6d4, #10b981);
            border-radius: 50%;
            z-index: -1;
            animation: avatarGlow 3s ease-in-out infinite alternate;
        }

        @keyframes avatarGlow {
            0% { opacity: 0.6; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.05); }
        }

        .user-avatar:hover {
            transform: scale(1.1) rotate(-5deg);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 4px 12px rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.6);
        }

        .user-avatar i {
            font-size: 4.5rem;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
            z-index: 1;
            position: relative;
        }

        .user-avatar:hover i {
            transform: scale(1.15) rotate(5deg);
            color: rgba(255, 255, 255, 1);
            text-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .user-details {
            flex: 1;
            animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .user-details h3 {
            font-size: 1rem;
            margin-bottom: 0.8rem;
            opacity: 0.85;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--accent-contrast);
        }

        .user-details .username {
            font-size: 2.8rem;
            font-weight: 800;
            margin: 0;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            background: linear-gradient(45deg, #ffffff 0%, #f0f9ff 50%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: textShimmer 3s ease-in-out infinite;
            line-height: 1.1;
        }

        @keyframes textShimmer {
            0%, 100% {
                background-position: 0% 50%;
                filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
            }
            50% {
                background-position: 100% 50%;
                filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.8));
            }
        }

        /* 右上角退出按钮样式 - 现代设计 */
        .logout-btn-corner {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 0; width: 40px; height: 40px; border-radius: 50%;
            border: none;
            background: var(--danger-gradient, linear-gradient(135deg, #ef4444 0%, #dc2626 100%));
            color: var(--accent-contrast);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 50%;
            box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
            overflow: hidden;
            border: none;
            z-index: 10;
            backdrop-filter: none;
        }

        /* Disable legacy shine effect for corner variant */
        .logout-btn.logout-btn-corner::before { content: none !important; }

        .logout-btn.logout-btn-corner .logout-text { display: none !important; white-space: nowrap; }
.logout-btn.logout-btn-corner:hover .logout-text { display: none !important; }

        .logout-btn-corner:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.18));
            background: var(--danger-gradient, linear-gradient(135deg, #ef4444 0%, #dc2626 100%)); color: var(--accent-contrast); border-color: transparent;
        }

        .logout-btn-corner:hover .logout-text {
            display: inline;
            animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        .logout-btn-corner:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring, 0 0 0 3px rgba(99,102,241,.15));
        }

        .logout-btn-corner:active {
            transform: translateY(0) scale(0.98);
            transition: all 0.1s ease;
        }

        /* 保留原有退出按钮样式用于其他地方 */
        .logout-btn:not(.logout-btn-corner) {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            padding: 1.2rem;
            margin: 1.5rem 0 0;
            border: none;
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }

        .logout-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .logout-btn:hover::before {
            left: 100%;
        }

        .logout-btn:hover {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .logout-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

        .logout-btn:disabled {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 6px rgba(156, 163, 175, 0.3);
            opacity: 0.7;
        }

        .logout-btn i {
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .logout-btn:hover i {
            transform: translateX(-2px);
        }

        /* Corner logout icon size overrides */
        .logout-btn.logout-btn-corner i { font-size: 1.1rem; line-height: 1; }




        /* 系统状态样式 */
        .system-status {
            padding: 2rem;
            background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
            border-top: 1px solid rgba(3, 169, 244, 0.1);
        }

        .system-status h4 {
            margin: 0 0 1.5rem 0;
            color: #0277bd;
            font-size: 1.1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .status-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(3, 169, 244, 0.1);
        }

        .status-label {
            font-size: 0.95rem;
            color: #475569;
            font-weight: 500;
        }

        .refresh-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .refresh-btn:hover {
            transform: scale(1.1) rotate(180deg);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
        }

        .refresh-btn:active {
            transform: scale(0.95);
        }

        /* 免责声明样式 */
        .disclaimer {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 16px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .disclaimer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #06b6d4);
            background-size: 300% 100%;
            animation: gradientShift 4s ease-in-out infinite;
        }

        .disclaimer:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .disclaimer p {
            color: #64748b;
            line-height: 1.6;
            margin: 0;
            font-size: 0.95rem;
            text-align: center;
        }

        .disclaimer strong {
            color: #1e293b;
            font-weight: 600;
        }

        /* 系统公告样式 - 玻璃拟物卡片 */
        .system-announcement {
            position: relative;
            margin: 2rem 2.5rem;
            padding: 2.25rem 2.4rem;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.28);
            box-shadow: 0 24px 60px rgba(99, 102, 241, 0.12), 0 12px 32px rgba(118, 75, 162, 0.1);
            overflow: hidden;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.35s cubic-bezier(0.33, 1, 0.68, 1);
        }

        @supports not ((backdrop-filter: blur(16px))) {
            .system-announcement {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.14) 0%, rgba(118, 75, 162, 0.16) 100%);
                border: 1px solid rgba(99, 102, 241, 0.2);
            }
        }

        .system-announcement::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #f093fb);
            background-size: 200% 100%;
            animation: gradientSlide 6s ease-in-out infinite;
        }

        .system-announcement::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.22), transparent 55%), radial-gradient(circle at bottom right, rgba(240, 147, 251, 0.24), transparent 60%);
            pointer-events: none;
            mix-blend-mode: screen;
        }

        @keyframes gradientSlide {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .system-announcement:hover {
            transform: translateY(-6px);
            box-shadow: 0 32px 70px rgba(99, 102, 241, 0.18), 0 18px 40px rgba(118, 75, 162, 0.14);
        }

        .system-announcement h3 {
            color: #0f172a;
            margin: 0 0 1.75rem 0;
            font-size: 1.35rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.9rem;
            border: none;
            padding-bottom: 0;
            position: relative;
            letter-spacing: 0.01em;
        }

        .system-announcement h3::after {
            content: '';
            position: absolute;
            bottom: -0.6rem;
            left: 0;
            width: 74px;
            height: 3px;
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.8), rgba(118, 75, 162, 0.4));
            border-radius: 999px;
        }

        :root {
            --ann-pad-y: 10px;
            --ann-pad-x: 16px;
            --ann-minh: 44px;
            --ann-gap: 10px;
        }

        .announcement-content {
            background: var(--surface);
            border-radius: 18px;
            border: 1px solid rgba(99, 102, 241, 0.14);
            overflow: hidden;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
        }

        @supports not ((backdrop-filter: blur(12px))) {
            .announcement-content {
                background: var(--surface);
            }
        }

        .announcement-item {
            position: relative;
            border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18));
            transition: background 0.25s ease, box-shadow 0.25s ease;
            overflow: hidden;
        }

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

        .announcement-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--accent-10, linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(118, 75, 162, 0.12)));
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
        }

        .announcement-item:hover::before {
            opacity: 1;
        }

        .ann-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 15px 0;
            padding: 10px 16px;
            background-color: var(--muted-bg, #f8f9fa);
            border-radius: 10px;
        }

        .ann-section-icon {
            color: var(--accent);
            font-size: 25px;
        }

        .ann-section-title {
            font-size: 18px;
            font-weight: 500;
            color: var(--text, #333);
            margin: 0;
        }

        /* details/summary 语义结构支持：隐藏默认箭头，映射 open 状态到既有样式 */
        .announcement-item summary.announcement-header { list-style: none; }
        .announcement-item summary.announcement-header::-webkit-details-marker { display: none; }
        .announcement-item[open]::before { opacity: 1; }
        .announcement-item[open] .announcement-title { color: var(--accent); }
        .announcement-item[open] .announcement-toggle { color: var(--accent); }
        .announcement-item[open] .announcement-toggle i { transform: rotate(180deg); }

        .announcement-item > .announcement-header {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--ann-gap);
            padding: var(--ann-pad-y) var(--ann-pad-x);
            min-height: var(--ann-minh);

            cursor: pointer;
            color: var(--text);
        }

        .announcement-item:hover .announcement-header {
            color: var(--accent);
        }

        .announcement-item .announcement-title {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex: 1;
            font-weight: 600;
            font-size: 1.05rem;
            letter-spacing: 0.01em;
        }

        .announcement-item .announcement-title i {
            color: var(--accent);
            font-size: 1.05rem;
            filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.4));
        }

        /* 标题单行省略，避免右侧区域拥挤 */
        .announcement-item .announcement-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }



        .click-hint {
            font-size: 0.7rem;
            color: var(--text-secondary, #64748b);
            background: var(--accent-10, rgba(99, 102, 241, 0.12));
            padding: 2px 8px;
            border-radius: 999px;
            margin-left: auto;
            transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
            opacity: 0.8;
        }

        .announcement-item:hover .click-hint,
        .announcement-item[open] .click-hint {
            color: var(--accent);
            background: var(--accent-15, rgba(99, 102, 241, 0.22));
            opacity: 1;
        }

        .announcement-toggle {
            color: var(--text-secondary, #94a3b8);
            transition: transform 0.28s ease, color 0.28s ease;
            padding: 0.2rem;
        }

        .announcement-item:hover .announcement-toggle,
        .announcement-item[open] .announcement-toggle {
            color: var(--accent);
        }

        .announcement-content-body {
            position: relative;
            z-index: 1;
            padding: 0 var(--ann-pad-x);
            padding-bottom: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-6px);
            transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.24s ease;
        }

        /* 兼容按照 aria-expanded 状态旋转箭头 */
        .announcement-item > .announcement-header[aria-expanded='true'] .announcement-toggle i {
            transform: rotate(180deg);
        }

        /* 修复：details 打开时展示正文内容（此前始终 max-height:0 导致不可见） */
        .announcement-item[open] .announcement-content-body {
            max-height: 9999px; /* 使用极大值避免长内容被裁剪 */
            opacity: 1;
            transform: translateY(0);
            padding-bottom: var(--ann-pad-y);
        }



        /*   >=480px  */
        /* 修复：启用“点击展开/收起”提示在各端显示，避免桌面端被隐藏 */
        /* 原先在 >=480px 隐藏，这里移除以满足可用性诉求 */




        .announcement-text {
            color: var(--text);
            margin-bottom: 1rem;
            line-height: 1.7;
            font-size: 0.96rem;
            padding-top: 0.75rem;
        }

        .announcement-text h1, .announcement-text h2, .announcement-text h3, .announcement-text h4 {
            margin: 18px 0 12px 0;
            color: var(--text);
            font-weight: 600;
        }

        .announcement-text h1 { font-size: 19px; }
        .announcement-text h2 { font-size: 17px; }
        .announcement-text h3 { font-size: 16px; }
        .announcement-text h4 { font-size: 15px; }

        .announcement-text p {
            margin: 10px 0;
            line-height: 1.7;
        }

        .announcement-text code {
            background: var(--muted-bg, rgba(15, 23, 42, 0.08));
            color: var(--accent);
            padding: 2px 6px;
            border-radius: 6px;
        }

        .announcement-text pre {
            background: var(--muted-bg, rgba(15, 23, 42, 0.08));
            border-radius: 12px;
            padding: 1rem;
            font-size: 0.85rem;
            overflow-x: auto;
        }

        .announcement-text blockquote {
            border-left: 4px solid var(--accent-30, rgba(99, 102, 241, 0.35));
            padding: 0.75rem 1rem;
            background: var(--accent-10, rgba(99, 102, 241, 0.08));
            border-radius: 0 12px 12px 0;
        }

        .announcement-date {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
            color: var(--text-secondary, #64748b);
            letter-spacing: 0.02em;
        }

        .announcement-date i {
            color: var(--accent);
            font-size: 0.85rem;
        }

        .no-announcement {
            padding: 1.75rem;
            text-align: center;
            color: var(--text-secondary, #475569);
            background: var(--surface);
            border-radius: 18px;
            border: 1px dashed var(--accent-30, rgba(99, 102, 241, 0.25));
        }

        .no-announcement i {
            color: var(--accent);
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            display: block;
            filter: drop-shadow(0 10px 20px rgba(168, 85, 247, 0.25));
        }

        @media (max-width: 1023px) {
            .system-announcement {
                margin: 1.75rem 1.75rem;
                padding: 1.9rem 2rem;
                border-radius: 22px;
            }

            .announcement-item > .announcement-header {
                padding: var(--ann-pad-y) var(--ann-pad-x);
            }

            .announcement-content-body {
                padding: 0 var(--ann-pad-x);
            }


        }

        @media (max-width: 768px) {
            .system-announcement {
                margin: 1.25rem 1.1rem;
                padding: 1.55rem 1.65rem;
                border-radius: 20px;
            }

            .announcement-item > .announcement-header {
                align-items: flex-start;
                padding: var(--ann-pad-y) var(--ann-pad-x);
            }

            .announcement-item .announcement-title {
                font-size: 0.95rem;
            }

            .announcement-content-body {
                padding: 0 var(--ann-pad-x);
            }



            .announcement-text {
                font-size: 0.92rem;
            }
        }

        @media (max-width: 480px) {
            .system-announcement {
                margin: 1rem 0.75rem;
                padding: 1.4rem 1.35rem;
                border-radius: 18px;
            }

            .announcement-item .announcement-title {
                font-size: 0.9rem;
            }

            .announcement-text {
                font-size: 0.9rem;
            }

            .no-announcement {
                padding: 1.25rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .system-announcement,
            .announcement-item,
            .announcement-content-body,
            .announcement-toggle,
            .ann-modal,
            .ann-modal-overlay {
                transition: none !important;
                animation: none !important;
            }
        }
        /* 滚动条美化 */
        .announcement-content::-webkit-scrollbar {
            width: 6px;
        }

        .announcement-content::-webkit-scrollbar-track {
            background: var(--muted-bg, rgba(0, 0, 0, 0.05));
            border-radius: 3px;
        }

        .announcement-content::-webkit-scrollbar-thumb {
            background: var(--brand-gradient);
            border-radius: 3px;
        }

        .announcement-content::-webkit-scrollbar-thumb:hover {
            background: var(--brand-gradient-hover, var(--brand-gradient));
        }

        .disclaimer {
            display: block;
            margin-bottom: 0.8rem;
            font-size: 1.1rem;
        }

        .disclaimer .heart {
            color: #ef4444;
            animation: heartbeat 1.5s ease-in-out infinite;
            display: inline-block;
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* 移动端响应式设计 */
        @media (max-width: 768px) {
            .user-profile {
                border-radius: 20px;
                margin: 1rem;
                min-height: 500px;
            }

            .user-header {
                flex-direction: column;
                text-align: center;
                padding: 2.5rem 2rem 2rem;
                gap: 2rem;
            }

            .user-body {
                padding: 2rem 1.75rem 2.25rem;
                gap: 1.5rem;
            }

            .user-avatar {
                width: 100px;
                height: 100px;
            }

            .user-avatar i {
                font-size: 3.5rem;
            }

            .user-details .username {
                font-size: 2.2rem;
            }

            .system-announcement {
                margin: 1.5rem 2rem;
                padding: 1.5rem;
                border-radius: 12px;
            }

            .logout-btn-corner {



                top: 15px;
                right: 15px;
                width: 36px; height: 36px;
            }

            .logout-btn.logout-btn-corner i { font-size: 1.0rem; }

        }

        /* 小屏幕设备优化 */
        @media (max-width: 480px) {
            .user-profile {
                margin: 0.8rem;
                border-radius: 16px;
                min-height: 450px;
            }

            .user-header {
                padding: 2rem 1.5rem 1.5rem;
                gap: 1.5rem;
            }

            .user-body {
                padding: 1.5rem 1.25rem 1.75rem;
                gap: 1.25rem;
            }

            .user-avatar {
                width: 80px;
                height: 80px;
            }

            .user-avatar i {
                font-size: 3rem;
            }

            .user-details .username {
                font-size: 1.8rem;
            }

            .system-announcement {
                margin: 1rem 1.5rem;
                padding: 1.2rem;
            }

            .logout-btn-corner {
                top: 12px;
                right: 12px;
                width: 34px; height: 34px;
            }

            .logout-btn.logout-btn-corner i { font-size: 0.95rem; }
        }

        /* 移动端预览机界面优化 */
        @media (max-width: 768px) {
            /* 确保预览机页面容器无多余空白 */
            #previewPage {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
                box-sizing: border-box;
            }

            /* 预览机页面在移动端的布局 */
            #previewPage .preview-machine {
                padding: 0;
                width: 100%;
                max-width: 100%;
                min-height: calc(100vh - 120px);
                display: flex;
                flex-direction: column;
                overflow-x: hidden;
                box-sizing: border-box;
            }

            /* 移动端内容区域 */
            #previewPage .preview-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                padding: 0.75rem;
                width: 100%;
                box-sizing: border-box;
                overflow-x: auto;
                overflow-y: visible;
            }

            /* 移动端宽屏预览模式的特殊处理 */
            #previewPage .preview-stage.device-ipad-landscape,
            #previewPage .preview-stage.device-desktop {
                margin: 1.5rem auto;
                min-width: 320px;
            }

            /* 批量控制按钮移动端布局 - 垂直排列 */
            #previewPage .batch-controls {
                flex-direction: column;
                gap: 0.5rem;
                margin: 0.5rem 0;
                padding: 0;
                width: 100%;
                box-sizing: border-box;
            }

            /* 导航按钮容器保持水平布局 */
            #previewPage .nav-container {
                flex-direction: row !important;
                justify-content: center;
                gap: 1rem;
                margin: 0.5rem 0;
                padding: 0;
            }

            /* 设置按钮移动端优化 */
            #previewPage .settings-btn {
                width: 100%;
                padding: 0.75rem;
                height: 48px;
                font-size: 0.95rem;
            }

            /* 导出按钮移动端优化 */
            #previewPage .export-btn {
                width: 100%;
                padding: 0.75rem;
                height: 48px;
                font-size: 0.95rem;
            }

            /* 弹窗移动端优化 */
            .settings-modal {
                padding: 1rem;
                box-sizing: border-box;
            }

            .settings-modal.show {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .settings-modal-content {
                width: 95%;
                max-width: 380px;
                margin: 0;
                max-height: calc(100vh - 2rem);
                overflow-y: auto;
                position: relative;
            }

            /* 确保弹窗在移动端完全可见 */
            .settings-modal {
                height: 100vh;
                height: 100dvh; /* 动态视口高度，支持的浏览器会使用这个 */
                min-height: 100vh;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
            }

            .settings-modal.show {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 1rem !important;
                box-sizing: border-box !important;
            }

            .settings-header {
                padding: 1rem;
            }

            .settings-header h3 {
                font-size: 1.1rem;
            }

            .settings-body {
                padding: 1rem;
            }

            .setting-item {
                margin-bottom: 1rem;
            }

            .setting-item label {
                font-size: 0.9rem;
            }

            .setting-select {
                padding: 0.75rem;
                font-size: 0.95rem;
            }

            .settings-footer {
                padding: 1rem;
            }

            .save-settings-btn {
                padding: 0.75rem;
                font-size: 0.95rem;
            }

            /* 预览舞台移动端优化 */
            #previewPage .preview-stage {
                margin: 0.5rem auto;
                border-radius: 12px;
                width: 100%;   /* 小屏宽度填满，便于根据容器自适应高度 */
                height: auto;
                min-height: 0; /* 显式取消 400px 的最小高度限制 */
                box-sizing: border-box;
            }

            /* 移动端设备预览模式 - 完全适配模板原始尺寸 */
            #previewPage .preview-stage.device-square,
            #previewPage .preview-stage.device-phone-portrait,
            #previewPage .preview-stage.device-ipad-landscape,
            #previewPage .preview-stage.device-desktop {
                width: auto;
                height: auto;
                max-width: 95vw;
                max-height: 60vh;
                border-radius: 12px;
            }

            #previewPage .preview-stage.device-square {
                --preview-aspect: 1 / 1;
            }

            #previewPage .preview-stage.device-phone-portrait {
                --preview-aspect: 9 / 16;
                border-radius: 16px;
            }

            #previewPage .preview-stage.device-ipad-landscape {
                --preview-aspect: 4 / 3;
                border-radius: 12px;
            }

            #previewPage .preview-stage.device-desktop {
                --preview-aspect: 16 / 9;
                border-radius: 8px;
            }

            /* 移动端设备标签 */
            .device-label {
                font-size: 0.7rem;
                padding: 3px 8px;
                top: -25px;
            }

            /* 导航按钮移动端优化 - 使用具体ID确保优先级 */
            #previewPage #previewPrevBtn,
            #previewPage #previewNextBtn {
                width: 50px !important;
                height: 50px !important;
                min-width: 50px !important;
                min-height: 50px !important;
                max-width: 50px !important;
                max-height: 50px !important;
                flex-shrink: 0 !important;
                flex-grow: 0 !important;
                flex-basis: auto !important;
                font-size: 1.2rem !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* 通用导航按钮样式 */
            #previewPage .nav-btn {
                width: 50px !important;
                height: 50px !important;
                min-width: 50px !important;
                min-height: 50px !important;
                max-width: 50px !important;
                max-height: 50px !important;
                flex-shrink: 0 !important;
                flex-grow: 0 !important;
                font-size: 1.2rem;
                border-radius: 50% !important;
            }

            /* 文件计数器移动端优化 */
            #previewPage .file-counter {
                font-size: 0.8rem;
                padding: 0.5rem;
                margin: 0.5rem 1rem;
                text-align: center;
            }

            #previewPage .upload-card {
                padding: 1.75rem;
                margin: 0;
                width: 100%;
                box-sizing: border-box;
                border-radius: 16px;
                position: relative;
                z-index: 1;
            }

            #previewPage .upload-card h3 {
                font-size: 1rem;
                margin-bottom: 0.75rem;
                text-align: center;
            }

            #previewPage .upload-button {
                padding: 0.75rem;
                font-size: 0.9rem;
                width: 100%;
                min-height: 44px;
            }

            #previewPage .file-counter {
                font-size: 0.8rem;
                margin-top: 0.75rem;
                text-align: center;
                padding: 0.5rem;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 8px;
            }

            /* 预览提示移动端优化 */
            #previewPage .preview-hint {
                padding: 1rem 0;
                font-size: 0.85rem;
                margin: 0;
                width: 100%;
                box-sizing: border-box;
            }

            /* 移动端预览图片容器优化 */
             #previewPage .preview-image-container {
                 position: relative;
                 width: 100%;
                 max-height: 55vh;
                 overflow: hidden;
                 border-radius: 12px;
                 margin: 0.5rem 0;
                 background: #f8f9fa;
                 z-index: 1;
             }

             #previewPage .preview-image {
                 width: 100%;
                 height: auto;
                 max-height: 55vh;
                 object-fit: contain;
                 display: block;
                 margin: 0 auto;
             }

             /* 移动端预览信息栏优化 */
             #previewPage .preview-info-bar {
                 padding: 0.75rem;
                 flex-direction: row;
                 justify-content: space-between;
                 gap: 0.5rem;
                 align-items: center;
                 flex-wrap: nowrap;
                 position: relative;
                 z-index: 3;
                 background: rgba(255, 255, 255, 0.95);
                 backdrop-filter: blur(10px);
                 border-radius: 12px;
                 margin: 0.5rem;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             }

             #previewPage .face-count,
             #previewPage .preview-counter {
                 font-size: 0.7rem;
                 padding: 0.4rem 0.6rem;
                 border-radius: 8px;
                 white-space: nowrap;
                 flex-shrink: 0;
                 min-width: auto;
             }

             /* 移动端底部安全区域 */
             #previewPage {
                 padding-bottom: env(safe-area-inset-bottom, 1rem);
             }

             /* 确保内容不被底部导航遮挡 */
             #previewPage .preview-content {
                 margin-bottom: 2rem;
                 position: relative;
                 z-index: 1;
             }

            /* 滑动提示样式 */
            #previewPage .batch-controls::after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                width: 20px;
                background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
                pointer-events: none;
                z-index: 1;
            }

            #previewPage .batch-controls {
                position: relative;
            }

            /* 添加滑动提示文字 */
            #previewPage .mobile-scroll-hint {
                display: block;
                text-align: center;
                font-size: 0.7rem;
                color: var(--text-secondary, #6b7280);
                margin-top: 0.5rem;
                padding: 0 1rem;
            }

            #previewPage .mobile-scroll-hint::before {
                content: '👈 滑动查看更多选项';
            }
        }

        /* 设置按钮样式 */
        #previewPage .settings-btn {
            width: auto;
            padding: 1.2rem 1.8rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            color: white;
            border: none;
            border-radius: 16px;
            margin: 0.75rem 0.75rem 0.75rem 0;
            font-size: 1rem;
            font-weight: 600;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #previewPage .settings-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        #previewPage .settings-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 50%, #ec4899 100%);
        }

        #previewPage .settings-btn:hover::before {
            left: 100%;
        }

        #previewPage .settings-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
        }

        #previewPage .settings-btn:disabled {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 6px rgba(156, 163, 175, 0.3);
            opacity: 0.7;
        }

        /* 折叠式设置面板样式 */
        .settings-dropdown-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 10px 0;
        }

        .settings-btn {
            position: relative;
            width: auto;
            padding: 10px 16px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            color: #1f2937;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
            display: flex;
            align-items: center;
            letter-spacing: 0.025em;
            will-change: transform;
        }

        .settings-btn:hover {
            background: rgba(255, 255, 255, 0.98);
            border-color: rgba(99, 102, 241, 0.3);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .settings-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .settings-arrow {
            margin-left: 8px;
            font-size: 12px;
            transition: transform 0.2s ease-out;
            will-change: transform;
        }

        .settings-btn.active .settings-arrow {
            transform: rotate(180deg);
        }

        .settings-dropdown {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            min-width: 280px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 12px;
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(8px);
            transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
            margin-bottom: 8px;
            padding: 16px;
            max-height: 350px;
            overflow-y: auto;
            will-change: opacity, transform;
        }

        .settings-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .settings-dropdown .setting-item {
            margin-bottom: 14px;
        }

        .settings-dropdown .setting-item:last-of-type {
            margin-bottom: 0;
        }

        .settings-dropdown .setting-item label {
            font-size: 13px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 6px;
            display: block;
            letter-spacing: 0.025em;
        }

        .settings-dropdown .setting-select {
            width: 100%;
        }

        .settings-dropdown .settings-footer {
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid rgba(229, 231, 235, 0.6);
        }

        .settings-dropdown .save-settings-btn {
            width: 100%;
            padding: 10px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
            letter-spacing: 0.025em;
        }

        .settings-dropdown .save-settings-btn:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .settings-dropdown .save-settings-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .settings-modal {
                padding: 0.5rem;
            }

            .settings-modal-content {
                width: 98%;
                max-width: none;
                border-radius: 16px;
                max-height: 90vh;
            }

            .settings-header {
                padding: 1rem;
            }

            .settings-body {
                padding: 1rem;
            }

            .settings-footer {
                padding: 1rem;
            }

            /* 预览设置按钮移动端样式 */
            .settings-dropdown-container {
                margin: 8px 0;
            }

            .settings-btn {
                padding: 8px 12px;
                font-size: 12px;
                min-width: 120px;
            }

            .settings-dropdown {
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                width: 280px;
                max-width: 90vw;
                margin-bottom: 8px;
                max-height: 60vh;
            }

            .settings-dropdown.show {
                transform: translateX(-50%) translateY(0);
            }

        }

        @media (max-width: 320px) {
            .settings-modal-content {
                width: 100%;
                border-radius: 12px;
                margin: 0;
            }

            #previewPage .upload-card {
                min-width: 120px;
                padding: 0.5rem;
            }

            #previewPage .upload-card h3 {
                font-size: 0.9rem;
                margin-bottom: 0.5rem;
            }
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            border-bottom: 1px solid rgba(226, 232, 240, 0.6);
            background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
            position: relative;
            overflow: hidden;
        }

        .settings-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .settings-header:hover::before {
            left: 100%;
        }

        .settings-header h3 {
            margin: 0;
            font-size: 1.3rem;
            font-weight: 700;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
            letter-spacing: 0.5px;
            position: relative;
            z-index: 1;
        }

        /* 关闭按钮样式 - 优化版 */
        .close-btn {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            font-size: 1.4rem;
            color: white;
            padding: 0;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 4px 12px rgba(239, 68, 68, 0.3),
                0 0 0 2px rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
        }

        .close-btn:hover {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            transform: translateY(-2px) scale(1.05);
            box-shadow:
                0 6px 20px rgba(239, 68, 68, 0.4),
                0 0 0 3px rgba(255, 255, 255, 0.2);
        }

        .close-btn:active {
            transform: translateY(-1px) scale(1.02);
            box-shadow:
                0 3px 8px rgba(239, 68, 68, 0.4),
                0 0 0 2px rgba(255, 255, 255, 0.1);
        }

        .settings-body {
            padding: 2rem 1.5rem;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }

        .setting-item {
            margin-bottom: 1.8rem;
            position: relative;
        }

        .setting-item:last-child {
            margin-bottom: 0;
        }

        .setting-item label {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.75rem;
            letter-spacing: 0.3px;
            position: relative;
        }

        .setting-item label::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transition: width 0.3s ease;
        }

        .setting-item:hover label::after {
            width: 100%;
        }

        .setting-select {
            width: 100%;
            max-width: 100%;
        }

        .settings-footer {
            padding: 1.5rem;
            border-top: 1px solid rgba(226, 232, 240, 0.6);
            position: relative;
        }

        .settings-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        }

        /* 保存设置按钮样式 */
        /* 保存设置按钮样式 - 优化版 */
        .save-settings-btn {
            width: 100%;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 4px 15px rgba(16, 185, 129, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .save-settings-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .save-settings-btn:hover::before {
            left: 100%;
        }

        .save-settings-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow:
                0 8px 25px rgba(16, 185, 129, 0.4),
                0 0 0 2px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
        }

        .save-settings-btn:active {
            transform: translateY(-1px) scale(1.01);
            box-shadow:
                0 4px 12px rgba(16, 185, 129, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .save-settings-btn:disabled {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 6px rgba(156, 163, 175, 0.3);
            opacity: 0.6;
        }

        .save-settings-btn:disabled::before {
            display: none;
        }

        /* 添加设置弹窗的微交互效果 */
        .settings-modal-content:hover {
            box-shadow:
                0 30px 60px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }

        /* 添加进度显示样式 */
        .export-progress {
            margin-top: 1.5rem;
            padding: 1rem;
            background: #f8f9ff;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .progress-title {
            font-size: 0.95rem;
            color: #333;
            font-weight: 500;
        }

        .progress-percentage {
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
        }

        .progress-bar-container {
            height: 6px;
            background: var(--track-bg);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 0.75rem;
        }

        .progress-bar-fill {
            height: 100%;
            background: var(--brand-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%));
            width: 0%;
            transition: width 0.3s ease;
            will-change: width;
            position: relative;
            overflow: hidden;

/* 进度条轻微滑动高光，呼应 action-btn 动效 */
@keyframes progress-shimmer {
  0%   { transform: translateX(-160%); }
  100% { transform: translateX(160%); }
}
.progress-bar-fill::after{
  content: '';
  position: absolute; top: 0; bottom: 0; left: -30%; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: progress-shimmer 2.8s ease-in-out infinite;
  pointer-events: none; mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill::after { animation: none; }
}

        }

        .progress-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--text-secondary, #6b7280);
        }

        .progress-count {
            font-weight: 500;
        }

        .progress-time {
            font-weight: 500;
        }

        /* 修改导出格式选择器样式 */
        .format-select {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #1f2937;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: background 0.3s ease,
                        border-color 0.3s ease,
                        box-shadow 0.3s ease;
        }

        .format-select label {
            color: var(--text-secondary, #4b5563);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .format-dropdown {
            flex: 1;
            width: 100%;
            max-width: 100%;
        }

        .format-dropdown option {
            background: white;
            color: #1f2937;
        }

        .prefix-input {
            flex: 1;
            padding: 0.5rem;
            border-radius: 6px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.8);
            color: #1f2937;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .prefix-input:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(99, 102, 241, 0.3);
        }

        .prefix-input:focus {
            outline: none;
            background: #ffffff;
            border-color: var(--accent);
            box-shadow: var(--focus-ring);
        }

        .prefix-input::placeholder {
            color: var(--text-secondary, #9ca3af);
        }

        /* 添加悬停效果 */
        .format-select:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(99, 102, 241, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .model-debug-tools {
            position: fixed;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            padding: 5px;
            border-radius: 5px;
            z-index: 9999;
            transition: all 0.3s ease;
            max-width: 180px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }

        .model-debug-tools.collapsed .debug-content {
            display: none;
        }

        .model-debug-tools.collapsed {
            max-width: 100px;
        }

        .debug-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            cursor: pointer;
            color: white;
            font-size: 12px;
            user-select: none;
        }

        .expand-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 14px;
            border-radius: 50%;
            background: linear-gradient(145deg, #333333, #1a1a1a);
            color: white;
            font-weight: bold;
        }

        .model-debug-tools.collapsed .expand-icon {
            content: "+";
        }

        .model-debug-tools:not(.collapsed) .expand-icon {
            content: "-";
        }

        .debug-content {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 5px;
        }

        .model-debug-tools button {
            background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            text-align: left;
            transition: all 0.2s ease;
        }

        .model-debug-tools button:hover {
            background: linear-gradient(145deg, #444444, #2c2c2c);
        }

/* === Mobile overflow fix for preview canvas and controls === */
@media (max-width: 768px) {
  /* 让预览舞台占满可用宽度，避免固定像素导致溢出 */
  #previewPage .preview-stage {
    width: 100% !important;
    height: auto !important;
    max-width: 100vw;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    position: relative;
  }
  /* 导航按钮覆盖在画布上，不再占据水平布局空间 */
  #previewPage .preview-stage .nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #previewPrevBtn {
    left: 8px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #previewNextBtn {
    right: 8px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* 画布在小屏下自适应容器宽度，保持比例 */
  #compositeCanvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* 超小屏进一步缩小导航按钮避免遮挡 */
  #previewPage .nav-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
  }
  #previewPrevBtn, #previewNextBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
  }
}

/* 强制确保预览机页面导航按钮始终可见 */
#previewPage #previewPrevBtn,
#previewPage #previewNextBtn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  z-index: 999 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

#previewPage #previewPrevBtn {
  left: 8px !important;
}

#previewPage #previewNextBtn {
  right: 8px !important;
}



/* 导出/通用确认弹层：提升层级，确保覆盖头像管理器等弹窗 */
.export-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050; /* > avatar-modal(9999) */
}
.export-modal__card {
  width: min(90vw, 380px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 20px 24px;
}
/* 进度条容器与填充在现有体系中已定义：.progress-bar-container / .progress-bar-fill */


/* Design Tokens（Modal）与导出弹窗覆盖，统一视觉与蒙层 */
:root {
  /* Core tokens */
  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --brand-gradient-hover: linear-gradient(135deg, #5a67d8 0%, #6b46c1 50%, #ec4899 100%);
  --radius-lg: 16px;
  --elevation-lg: 0 8px 25px rgba(102, 126, 234, 0.30);
  --overlay-bg: rgba(17, 24, 39, 0.50);
  --title-md-size: 18px;
  --title-md-weight: 600;
  /* Component aliases */
  --modal-overlay-bg: var(--overlay-bg);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--elevation-lg);
  --modal-title-size: var(--title-md-size);
  --modal-title-weight: var(--title-md-weight);
  --button-shadow: var(--elevation-lg);
  /* Theme tokens (Base) */
  --bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

  --text: #1a202c;
  --surface: rgba(255, 255, 255, 0.95);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
  --accent: #667eea;
  --accent-contrast: #ffffff;
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.1);
  --track-bg: rgba(0, 0, 0, 0.08);
  /* Select 控件风格 */
  --select-radius: 14px;
  --select-padding-y: 0.6rem;
  --select-padding-x: 1rem;
  --select-font-size: 0.95rem;
  --select-bg: rgba(255, 255, 255, 0.92);
  --select-bg-hover: rgba(255, 255, 255, 0.98);
  --select-bg-active: rgba(248, 250, 255, 1);
  --select-border: rgba(148, 163, 184, 0.35);
  --select-border-hover: rgba(99, 102, 241, 0.55);
  --select-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --select-shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.12);
  --select-chevron-size: 1rem;
  --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  --select-text: var(--text, #1a202c);
  /* 状态色（语义） */
  --success: #48bb78; /* green-500 */
  --warning: #f59e0b; /* amber-500 */
  --danger:  #ef4444; /* red-500 */
  --info:    #4299e1; /* blue-400 */
  /* 状态色渐变（可按主题覆盖） */
  --success-gradient: linear-gradient(135deg, #48bb78, #38a169);
  --warning-gradient: linear-gradient(135deg, #f59e0b, #d97706);
  --danger-gradient:  linear-gradient(135deg, #f56565, #e53e3e);
  --info-gradient:    linear-gradient(135deg, #4299e1, #3182ce);

  /* 文本/边框/弱底语义 */
  --text-secondary: #6b7280; /* gray-500 */
  --border: rgba(0, 0, 0, 0.12);
  --muted-bg: rgba(0, 0, 0, 0.04);



}
:root[data-theme="dark"] {
  /* 暗色示例主题 */
  --bg: linear-gradient(135deg, #0f172a 0%, #111827 50%, #0b1220 100%);
  --text: #e5e7eb;
  --surface: rgba(17, 24, 39, 0.88);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.50);
  --accent: #60a5fa; /* 蓝色主色 */
  --accent-contrast: #ffffff;
  --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #818cf8 100%);
  --brand-gradient-hover: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  --accent-10: rgba(96, 165, 250, 0.10);
  --accent-15: rgba(96, 165, 250, 0.15);
  --accent-30: rgba(96, 165, 250, 0.30);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.20);
  --track-bg: rgba(255, 255, 255, 0.15);
  /* Select 控件风格 */
  --select-bg: rgba(30, 41, 59, 0.88);
  --select-bg-hover: rgba(30, 41, 59, 0.94);
  --select-bg-active: rgba(30, 41, 59, 0.98);
  --select-border: rgba(148, 163, 184, 0.4);
  --select-border-hover: rgba(96, 165, 250, 0.55);
  --select-shadow: 0 12px 32px rgba(2, 6, 23, 0.35);
  --select-shadow-hover: 0 18px 40px rgba(2, 6, 23, 0.45);
  --select-text: var(--text, #e5e7eb);
  --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  /* 暗色覆盖 */
  --text-secondary: #9ca3af; /* gray-400 */
  --border: rgba(255, 255, 255, 0.16);
  --muted-bg: rgba(255, 255, 255, 0.08);


}



.export-modal { position: fixed; }
.export-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none; /* 不拦截点击 */
}
.export-modal__card {
  position: relative; /* 盖在蒙层之上 */
  z-index: 1;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden; /* 防止顶部高光和内容溢出圆角 */
}
.export-modal__card .progress-title {
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
}

/* Export modal header accent to echo action-btn gradient */
.export-modal__card::before{
  content:''; position:absolute; left:0; top:0; right:0; height:4px;
  background: var(--brand-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%));
  border-top-left-radius: var(--modal-radius);
  border-top-right-radius: var(--modal-radius);
}



/* 导出弹窗：轻微流动高光（呼应 action-btn 的 ::before 滑动效果） */
@keyframes modal-accent-shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.export-modal__card::after{
  content: '';
  position: absolute; top: 0; left: 0; height: 4px; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  border-top-left-radius: var(--modal-radius);
  border-top-right-radius: var(--modal-radius);
  animation: modal-accent-shimmer 2.4s ease-in-out infinite;
  pointer-events: none; mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .export-modal__card::after { animation: none; }
}


/* === Preview upload buttons: force same look as Watermark page === */
#previewPage .upload-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px dashed rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
#previewPage .upload-card:hover {
  border-color: rgba(102, 126, 234, 0.6) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
}
#previewPage .file-counter {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0.25rem !important;
  font-size: 0.85rem !important;
  color: #666 !important;
  border-radius: 0 !important;
}


/* === Preview toolbar (settings + export buttons on one row) === */
#previewPage .preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0 0.5rem;
  flex-wrap: nowrap;
}
#previewPage .preview-toolbar .batch-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: auto;
  margin: 0;
}
@media (max-width: 768px) {
  #previewPage .preview-toolbar { gap: 0.5rem; flex-direction: column; align-items: stretch; }
  #previewPage .preview-toolbar .batch-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}


/* === Preview settings dropdown smart placement overrides === */
#previewPage .settings-dropdown.placement-bottom{ top: calc(100% + 8px); bottom: auto; margin-top: 8px; }
#previewPage .settings-dropdown.placement-top{ bottom: calc(100% + 8px); top: auto; margin-bottom: 8px; }
/* When inline left is applied, we neutralize centering translate */
#previewPage .settings-dropdown[style*="left:"]{ transform: translateX(0) !important; }




/* === PreviewPage: Persistent settings panel (align with Watermark page logic) === */
#previewPage .settings-dropdown-container {
  margin: 1rem 0;
}
#previewPage #previewSettingsBtn {
  display: none !important; /* 隐藏下拉按钮，参数面板常显 */
}
#previewPage .settings-dropdown {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  background: #ffffff;
}
#previewPage .settings-dropdown .setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
#previewPage .settings-dropdown .setting-item:last-child {
  margin-bottom: 0;
}
#previewPage .settings-dropdown .setting-select {
  flex: 1;
}
#previewPage .save-settings-btn {
  width: 100%;
}
/* 让工具栏的导出按钮在移动端不挤占空间 */
@media (max-width: 768px) {
  #previewPage .preview-toolbar {
    flex-wrap: wrap;
    gap: .5rem;
  }
  #previewPage .preview-toolbar .batch-controls {
    width: 100%;
    display: flex;
    gap: .5rem;
  }
  #previewPage .preview-toolbar .batch-controls .export-btn {
    flex: 1;
  }
}


/* === PreviewPage: two-column layout (desktop) / single-column (mobile) === */
#previewPage .preview-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 1rem;
  align-items: start;
}
#previewPage .preview-left-column,
#previewPage .preview-right-column { min-width: 0; }

@media (max-width: 992px) {
  #previewPage .preview-grid { grid-template-columns: 1fr; }
}

/* Ensure stage stretches naturally in right column */
#previewPage .preview-right-column .preview-stage { width: 100%; }


/* === PreviewPage: left column overrides to prevent legacy flex rules === */
#previewPage .preview-left-column .upload-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

/* === PreviewPage: status bar (sticky) === */
#previewPage .preview-status-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12);
}

#previewPage .preview-status-bar .status-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    text-align: center;
    color: #1a202c;
    font-weight: 500;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    #previewPage .preview-status-bar {
        padding: 0.5rem 0.6rem;
        margin: 0 0 0.5rem 0;
    }
    #previewPage .preview-status-bar .status-text {
        font-size: 0.85rem;
    }
}
#previewPage .preview-left-column .control-card + .control-card { margin-top: 1rem; }



/* PreviewPage 参数面板更紧凑布局 */
#previewPage .param-group{ gap: .75rem !important; margin-bottom: 1rem !important; }
#previewPage .blend-mode-select{ margin: .5rem 0 !important; }
#previewPage .blend-mode-select label{ margin: 0 .5rem 0 0 !important; font-size: 1rem; }
#previewPage .blend-mode-select--switch{ justify-content:space-between !important; }
#previewPage .blend-mode-select--switch .switch{ margin:0 !important; }
#previewPage .blend-mode-select--switch .switch-text{ margin-right:0.5rem !important; }
#previewPage .setting-select{ padding: .75rem 1rem !important; }


/* === PreviewPage: 扁平化预览舞台，减少嵌套层的视觉卡片感 === */
#previewPage .preview-content{
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#previewPage .preview-stage{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}
/* 导航按钮在桌面端也覆盖在画布上 */
#previewPage .preview-stage .nav-btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#previewPage #previewPrevBtn{ left: 8px !important; }
#previewPage #previewNextBtn{ right: 8px !important; }
/* 预览机页面：画布无边框，层次由外层卡片/舞台承担（画布自身不再投影） */
#previewPage #compositeCanvas{
  border: 0 !important;
  box-shadow: none !important;
}


/* 预览机页面：默认隐藏设备标签 */
#previewPage .device-label { display: none !important; }


/* 预览画布上方提示卡片样式 */
.preview-tip-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border, #eef2f7);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px 0;
  color: #374151;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.preview-tip-card .fa-info-circle { color: #2563eb; }
.preview-tip-card .tip-text { line-height: 1.5; font-size: 0.95rem; }

@media (max-width: 480px) {
  .preview-tip-card { border-radius: 10px; padding: 10px 12px; }
  .preview-tip-card .tip-text { font-size: 0.9rem; }
}




/* Bottom sheet surface tokens (opaque) */
:root { --sheet-surface: #ffffff; }
:root[data-theme="dark"] { --sheet-surface: #111827; }


/* Safe-area + bottom nav spacing tokens (mobile) */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 估算底部导航高度（用于为内容区预留空间），如后续设计变更可调整 */
  --nav-h: 64px;
  --nav-safe: calc(var(--nav-h) + var(--safe-bottom));
}
/* 避免锚点/滚动定位被底栏遮挡（方案五） */
html { scroll-padding-bottom: var(--nav-safe); }


/* --- Mobile fixed floating notifications (toast) --- */
@media (max-width: 1024px) {
  /* Ensure all toast-like notifications are fixed to the viewport top-right on mobile */
  .toast-container,
  .toast {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    z-index: 10000 !important;
    pointer-events: auto;
  }
}


/* --- Mobile: 保证模型状态在小屏完整显示并始终换行到第二行 --- */
@media (max-width: 768px){
  .section-title{ flex-wrap: wrap; white-space: normal; }
  .section-title .model-status{ order:2; width:100%; display:block; margin-top:4px; font-size: clamp(12px,3.5vw,14px); text-align:center; }
}
/* --- Tablet: 平板端同样换行显示在第二行（不影响 PC） --- */
@media (min-width: 769px) and (max-width: 1024px){
  .section-title{ flex-wrap: wrap; white-space: normal; }
  .section-title .model-status{ order:2; width:100%; display:block; margin-top:6px; font-size: clamp(12px,2.2vw,14px); text-align:center; }
}
/* 极小屏兼容（保留原420阈值，确保覆盖更早规则） */
@media (max-width: 420px){
  .section-title{ flex-wrap: wrap; white-space: normal; }
  .section-title .model-status{ order:2; width:100%; margin-top:4px; font-size: clamp(12px,3.5vw,14px); }
}

/* 状态圆点指示（节省空间并增强识别度） */
.model-status::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:-1px; background: currentColor; opacity:.9; }
.model-status.loaded::before{ background:#22c55e; }
.model-status.loading::before{ background:#3b82f6; }
.model-status.error::before{ background:#ef4444; }
.model-status.warning::before{ background:#f59e0b; }

/* ========================================
   头像管理器弹窗（虚拟滚动优化）
   ======================================== */

/* 弹窗遮罩和容器 */
.avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-modal.show {
  display: flex;
  opacity: 1;
}

.avatar-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}

.avatar-modal__card {
  position: relative;
  width: 90%;
  max-width: 900px;
  height: 85vh; /* 回退：旧浏览器 */
  max-height: 85vh; /* 回退：旧浏览器 */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box; /* 避免边距导致尺寸超限 */
  z-index: 2;
}

/* 现代简约下拉：仅用于需要极简风格的场景（如混合模式选择） */
/* 说明：覆盖全局 select 规则，移除背景图标与阴影，保持简洁边框与轻微交互反馈 */
.minimal-select {
    background-color: var(--select-bg, #fff);
    color: var(--select-text, #1f2937);
    border: 1px solid var(--select-border, rgba(148, 163, 184, 0.35));
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: none;
    background-image: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.minimal-select:hover {
    border-color: rgba(99, 102, 241, 0.35);
    background-color: var(--select-bg-hover, rgba(255, 255, 255, 0.98));
}

.minimal-select:focus {
    outline: 2px solid rgba(99, 102, 241, 0.35);
    outline-offset: 2px;
    border-color: rgba(99, 102, 241, 0.5);
    background-color: var(--select-bg-hover, rgba(255, 255, 255, 0.98));
}

.minimal-select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* 行内字段：标签与控件同一行，留少量间距 */
.inline-field {
    display: flex;
    align-items: center;
    gap: 8px; /* 轻微间距 */
    flex-wrap: nowrap; /* 整行不换行 */
}

/* 行内字段内的标签保持单行，不换行 */
.inline-field label {
    white-space: nowrap;
}

/* 参数项：为特定行增加一点点向上间距（场景：手动擦脸与上方滑动条过近） */
.param-item--extra-gap-top {
    margin-top: 0.5rem;
}

.avatar-modal.show .avatar-modal__card {
  transform: scale(1);
}

/* 弹窗头部 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 工具栏 */
.modal-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.toolbar-search {
  position: relative;
  flex: 1;
}

.toolbar-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.toolbar-actions {
  display: flex;
  gap: 8px;
}

.toolbar-btn {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.toolbar-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #6366f1;
  color: #6366f1;
}

.toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-btn-danger {
  color: #dc2626;
  border-color: #fecaca;
}

.toolbar-btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #dc2626;
}

/* 弹窗主体（虚拟滚动容器） */
.modal-body {
  flex: 1;
  /* 移动端可能出现内容溢出，改为可滚动并允许内部滚动 */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* 修复 Flex 子元素在移动端无法滚动的问题 */
  background: #fff;
}

.virtual-scroll-wrapper {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 阻止滚动链到 body，避免出现背景页滚动 */
  /* 明确声明手势为垂直滚动，修复部分移动端无法下滑问题 */
  touch-action: pan-y;
}

/* 支持动态视口单位时，限制卡片最大高度，避免 100vh 在移动端的地址栏问题 */
@supports (height: 100dvh) {
  .avatar-modal__card {
    max-height: 85dvh;
  }
}

/* 移动端优化：考虑安全区、使用 dvh、确保内部滚动，避免弹窗溢出屏幕 */
@media (max-width: 768px) {
  .avatar-modal {
    /* 给卡片留出边距并考虑安全区，避免贴边溢出 */
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
  }
  .avatar-modal__card {
    width: 100%;
    max-width: 100%;
    height: auto; /* 由 max-height 约束 */
    /* 先用 100vh 作为通用回退，确保老旧移动端也能限制高度并启用内部滚动 */
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  /* 若浏览器支持 100svh，则优先使用，其在移动端地址栏/手势条变化时更稳定 */
  @supports (height: 100svh) {
    .avatar-modal__card {
      max-height: calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
  }
  /* 若浏览器支持 100dvh，则使用 dvh 覆盖 100vh 方案（更贴合可视区） */
  @supports (height: 100dvh) {
    .avatar-modal__card {
      max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
  }
  .modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    overscroll-behavior: contain;
  }
}

.virtual-scroll-spacer {
  /* 占位符，高度由JS动态设置 */
  width: 100%;
}

.virtual-scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* transform 由JS动态设置 */
}

/* 单个头像项 */
.avatar-item-virtual {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 80px;
  padding: 8px 24px;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
  transition: background 0.2s;
  cursor: pointer;
}

.avatar-item-virtual:hover {
  background: #f9fafb;
}

.avatar-item-virtual.selected {
  background: #eff6ff;
}

.avatar-item-virtual.dragging {
  opacity: 0.5;
  cursor: move;
}

.avatar-item-virtual.drag-over {
  border-top: 3px solid #6366f1;
}

/* 复选框 */
.avatar-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #6366f1;
}

/* 缩略图 */
.avatar-thumb-small {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  flex-shrink: 0;
}

/* 水印管理器：展开面板布局修正（纵向堆叠 + 自动高度） */
#watermarkModal .avatar-item-virtual {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 8px;
}
#watermarkModal .avatar-item-virtual .wm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
}
#watermarkModal .wm-settings-panel {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  padding: 8px 0;
}

/* 响应式水印设置面板 */
@media (max-width: 768px) {
  #watermarkModal .wm-settings-panel {
    margin-left: 0 !important;
    padding: 8px 0 !important;
  }
}

@media (max-width: 480px) {
  #watermarkModal .wm-settings-panel {
    margin-left: 0 !important;
    padding: 6px 0 !important;
  }
  
  #watermarkModal .param-item {
    margin: 4px 0 !important;
  }
  
  #watermarkModal .blend-mode-select {
    margin: 4px 0 !important;
  }
}
#watermarkModal .virtual-scroll-content {
  position: static;
  transform: none !important;
}

/* 元信息 */
.avatar-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.avatar-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-size {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

/* PC端参数信息单行显示 */
@media (min-width: 769px) {
  #watermarkModal .avatar-size {
    display: inline-block;
    white-space: nowrap;
  }
  
  /* PC端：不换行，使用分隔点替换 <br> */
  #watermarkModal .avatar-size br {
    display: inline; /* 取消换行 */
  }
}

/* 移动端参数信息分3行显示 */
@media (max-width: 768px) {
  #watermarkModal .avatar-size {
    white-space: normal;
    line-height: 1.4;
  }
  
  /* 移动端显示换行符 */
  #watermarkModal .avatar-size br {
    display: block;
  }
}

/* 操作按钮组 */
.avatar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.action-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-icon-btn.drag-handle-btn {
  cursor: grab;
}

.action-icon-btn.drag-handle-btn:active {
  cursor: grabbing;
}

.action-icon-btn:hover {
  background: #f3f4f6;
  border-color: #6366f1;
  color: #6366f1;
}

/* 高斯模糊开关：激活态样式（仅用于头像管理器开关按钮） */
.action-icon-btn.active {
  background: #eef2ff;
  border-color: #6366f1;
  color: #6366f1;
}

.action-icon-btn.delete-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

.avatar-item-virtual.avatar-reordered {
  animation: avatar-reorder-pop 220ms ease-out;
}

@keyframes avatar-reorder-pop {
  0% {
    transform: scale(0.96);
    background: #eef2ff;
    box-shadow: 0 0 0 rgba(99, 102, 241, 0.0);
  }
  60% {
    transform: scale(1.01);
    background: #e0e7ff;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.15);
  }
  100% {
    transform: scale(1);
    background: #fff;
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
}

/* 弹窗底部 */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.selected-count {
  font-size: 14px;
  color: #6b7280;
}

.footer-actions {
  display: flex;
  gap: 12px;
}

/* PC端：确保“保存修改”按钮文字保持单行显示 */
#saveChangesBtn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}



.action-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.action-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .avatar-modal__card {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .modal-header {
    padding: 16px 18px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .modal-header h3 {
    font-size: 1.1rem;
  }

  .modal-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 18px;
    gap: 10px;
  }

  .toolbar-search {
    order: 1;
  }

  .search-input {
    height: 44px;
    font-size: 16px; /* 防止iOS自动缩放 */
  }

  .toolbar-actions {
    order: 2;
    width: 100%;
    justify-content: space-between;
  }

  .toolbar-btn {
    flex: 1;
    height: 44px; /* 触摸友好尺寸 */
    font-size: 14px;
    padding: 0 12px;
    justify-content: center;
  }

  /* 增大触摸区域 */
  .avatar-item-virtual {
    padding: 12px 18px;
    height: 88px; /* 增大到88px */
    min-height: 88px;
  }

  .avatar-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .avatar-thumb-small {
    width: 64px;
    height: 64px;
  }

  .avatar-meta {
    gap: 6px;
  }

  .avatar-name {
    font-size: 14px;
    line-height: 1.4;
  }

  .avatar-size {
    font-size: 12px;
  }

  /* 触摸友好的操作按钮 */
  .action-icon-btn {
    width: 44px; /* Apple推荐的最小触摸尺寸 */
    height: 44px;
    font-size: 16px;
  }
  
/* 水印管理器内设置按钮与删除按钮形状一致（移动端方形） */
#watermarkModal .action-icon-btn.settings-btn {
  padding: 0;            /* 去除通用 .settings-btn 的内边距影响 */
  min-width: 0;
}
@media (max-width: 768px) {
  #watermarkModal .action-icon-btn.settings-btn,
  #watermarkModal .action-icon-btn.delete-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

  .avatar-actions {
    gap: 8px;
  }

  .modal-footer {
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .footer-actions {
    width: 100%;
    gap: 10px;
  }

  .footer-actions button {
    flex: 1;
    height: 48px; /* 增大按钮高度 */
    font-size: 16px;
  }

  /* 优化虚拟滚动容器 */
  .virtual-scroll-wrapper {
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
  }

  /* 拖拽时的视觉反馈 */
  .avatar-item-virtual.dragging {
    background: #f0f9ff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transform: scale(1.02);
  }

  .avatar-item-virtual.drag-placeholder {
    background: #e0e7ff;
    border: 2px dashed #6366f1;
  }
}

/* 小屏幕进一步优化 */
@media (max-width: 480px) {
  .toolbar-btn {
    font-size: 13px;
    padding: 0 10px;
  }

  .toolbar-btn i {
    font-size: 14px;
  }

  /* 操作按钮改为横排，节省垂直空间 */
  .avatar-actions {
    flex-direction: row;
    gap: 6px;
  }

  .action-icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* 触摸反馈效果 */
@media (hover: none) and (pointer: coarse) {
  /* 仅在触摸设备上应用 */
  .avatar-item-virtual:active {
    background: #f0f9ff;
    transition: background 0.05s;
  }

  .action-icon-btn:active {
    transform: scale(0.95);
    background: #e5e7eb;
  }

  .toolbar-btn:active:not(:disabled) {
    transform: scale(0.98);
    background: #e5e7eb;
  }

  /* 长按提示（移动端拖拽排序） */
  .avatar-item-virtual::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #6366f1;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .avatar-item-virtual.long-press-active::before {
    opacity: 1;
  }

  /* 拖拽手柄图标（移动端显示） */
  .avatar-item-virtual::after {
    content: '\f58e'; /* Font Awesome grip-vertical */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #d1d5db;
    font-size: 18px;
    opacity: 0.6;
  }
}

/* 性能优化：减少动画 */
@media (prefers-reduced-motion: reduce) {
  .avatar-modal,
  .avatar-modal__card,
  .avatar-item-virtual,
  .action-icon-btn {
    transition: none !important;
  }

  .avatar-item-virtual::before {
    transition: none !important;
  }
}

/* 预览机水印管理按钮居中 */
#previewWatermarkSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#managePreviewWatermarkBtn {
    margin-top: 12px;
}

/* 移动端禁用卡片悬停/点击放大动画（KISS/YAGNI） */
@media (hover: none) and (pointer: coarse) {
  .control-card:hover,
  .control-card:active,
  .preview-card:hover,
  .preview-card:active,
  .upload-card:hover,
  .upload-card:active {
    transform: none !important;
  }
}

/* 移动端-水印管理器隐藏 ::after 拖拽手柄（仅作用于水印管理器内的列表项） */
@media (hover: none) and (pointer: coarse) {
  #watermarkModal .avatar-item-virtual::after {
    content: none !important;
    display: none !important;
  }
}