/* 定义主题变量 */
        :root {
            /* 共用变量 */
            --high-quality-rendering: 1;
            --book-thickness: 104px;
            --half-thickness: 52px;
            
            /* 深色主题变量 */
            --cover-color: #3a2159;
            --pages-color: #f0f0f0;
            --pages-side-color: #e6e6e6;
            --pages-bottom-color: #e8e8e8;
            --spine-shadow: inset 0 0 22px rgba(255, 255, 255, 0.5);
            --spine-overlay-gradient: linear-gradient(90deg, 
                        rgba(255, 255, 255, 0.05) 0%, 
                        rgba(255, 255, 255, 0.1) 20%, 
                        rgba(255, 255, 255, 0.05) 50%,
                        rgba(255, 255, 255, 0.1) 80%, 
                        rgba(255, 255, 255, 0.35) 100%);
            --spine-left-transition: linear-gradient(to right, 
                        rgba(255, 255, 255, 0.5) 0%,
                        rgba(255, 255, 255, 0) 100%);
            --spine-right-transition: linear-gradient(to left, 
                        rgba(255,255,255,0.2) 0%, 
                        rgba(255,255,255,0.1) 100%);
            --spine-front-connection: linear-gradient(to right, 
                        rgba(255,255,255,0.5) 0%, 
                        rgba(255,255,255,0.01) 100%);
            --background-color: #CCC;
            --cover-border-left: 1.5px solid rgba(255, 255, 255, 0.6);
        }
        
        /* 浅色主题 */
        [data-theme="light"] {
            --cover-color: #fff;
            --pages-color: #f0f0f0;
            --pages-side-color: #e6e6e6;
            --pages-bottom-color: #e8e8e8;
            --spine-shadow: none;
            --spine-overlay-gradient: linear-gradient(90deg, 
                        rgba(10, 10, 10, 0.05) 0%, 
                        rgba(10, 10, 10, 0.1) 20%, 
                        rgba(10, 10, 10, 0.1) 50%,
                        rgba(10, 10, 10, 0.1) 80%, 
                        rgba(10, 10, 10, 0.2) 100%);
            --spine-left-transition: linear-gradient(to right, 
                        rgba(10, 10, 10, 0.3) 0%,
                        rgba(10, 10, 10, 0) 100%);
            --spine-right-transition: none;
            --spine-front-connection: linear-gradient(to right, 
                        rgba(10,10,10,0.2) 0%, 
                        rgba(10,10,10,0.01) 100%);
            --background-color: #CCC;
            --cover-border-left: none;
        }
        
        /* 通用书页纹理 - 两种主题共用 */
        /* 书页顶部纹理 */
        .book-pages-top {
            background-image: 
                /* 主要页面线条 */
                repeating-linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.06) 0px,
                    rgba(0, 0, 0, 0.06) 0.5px,
                    transparent 0.5px,
                    transparent 3.5px
                ),
                /* 次要页面线条 - 错位创造深度 */
                repeating-linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.03) 1px,
                    rgba(0, 0, 0, 0.03) 1.2px,
                    transparent 1.2px,
                    transparent 7px
                ),
                /* 微妙的噪点纹理 */
                url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.05"/%3E%3C/svg%3E'),
                /* 自然的渐变效果 - 模拟光线 */
                linear-gradient(
                    to left,
                    rgba(0, 0, 0, 0.07) 0%,
                    rgba(0, 0, 0, 0) 20%,
                    rgba(0, 0, 0, 0) 80%,
                    rgba(0, 0, 0, 0.07) 100%
                ) !important;
        }
        
        /* 书页底部纹理 */
        .book-pages-bottom {
            background-image: 
                /* 主要页面线条 */
                repeating-linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.08) 0px,
                    rgba(0, 0, 0, 0.08) 0.6px,
                    transparent 0.6px,
                    transparent 3.7px
                ),
                /* 次要页面线条 - 错位创造深度 */
                repeating-linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.04) 0.5px,
                    rgba(0, 0, 0, 0.04) 1px,
                    transparent 1px,
                    transparent 6.5px
                ),
                /* 微妙的噪点纹理 */
                url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.06"/%3E%3C/svg%3E'),
                /* 自然的渐变效果 - 模拟阴影 */
                linear-gradient(
                    to left,
                    rgba(0, 0, 0, 0.1) 0%,
                    rgba(0, 0, 0, 0.02) 20%,
                    rgba(0, 0, 0, 0.02) 80%,
                    rgba(0, 0, 0, 0.1) 100%
                ) !important;
        }
        
        /* 书页右侧纹理 */
        .book-pages-right {
            background-image: 
                /* 主要页面线条 */
                repeating-linear-gradient(
                    to right,
                    rgba(0, 0, 0, 0.07) 0px,
                    rgba(0, 0, 0, 0.07) 0.5px,
                    transparent 0.5px,
                    transparent 3px
                ),
                /* 次要页面线条 - 错位创造深度 */
                repeating-linear-gradient(
                    to right,
                    rgba(0, 0, 0, 0.03) 0.3px,
                    rgba(0, 0, 0, 0.03) 0.7px,
                    transparent 0.7px,
                    transparent 5.3px
                ),
                /* 微妙的噪点纹理 */
                url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.07"/%3E%3C/svg%3E'),
                /* 自然的渐变效果 - 从上到下的光影变化 */
                linear-gradient(
                    to bottom,
                    rgba(255, 255, 255, 0.5) 0%,
                    rgba(255, 255, 255, 0.2) 5%,
                    rgba(0, 0, 0, 0) 20%,
                    rgba(0, 0, 0, 0.07) 100%
                ) !important;
        }

        /* 浅色主题特定的封面与书脊连接处样式 */
        [data-theme="light"] .book-spine-front-connection {
            width: 30px;
            left: -6px;
            background: linear-gradient(to right, 
                        rgba(10,10,10,0.3) 0%, 
                        rgba(10,10,10,0.01) 100%);
            filter: blur(0.8px);
        }

        [data-theme="light"] .book-spine-transition-left {
            width: 8px;
            left: -4px;
            background: linear-gradient(to right, 
                        rgba(10, 10, 10, 0.3) 0%,
                        rgba(10, 10, 10, 0) 100%);
            filter: blur(1px);
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .app-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .main-content {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        .header {
            background-color: #1e1e1e;
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .control-panel {
            width: 320px;
            background-color: #2d2d2d;
            color: #e0e0e0;
            overflow-y: auto;
            padding: 1.5rem;
        }
        
        .preview-area {
            flex: 1;
            background-color: var(--background-color);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .book-container {
            perspective: 2000px;
            width: 450px; /* 保持原有宽度不变 */
            height: 660px; /* 增加10%高度：从600px到660px */
            margin: 0 auto;
        }
        
        .book {
            position: relative;
            transform-style: preserve-3d;
            width: 100%;
            height: 100%;
            transition: transform 0.5s;
            will-change: transform; /* 提高渲染性能 */
        }
        
        .book-face {
            position: absolute;
            backface-visibility: visible;
            overflow: hidden;
            filter: drop-shadow(0 0 85px rgba(0,0,0,0.2));
        }
        
        .book-front, .book-back {
            width: 100%;
            height: 100%;
        }
        
        .book-front {
            transform: translateZ(var(--half-thickness));
            background-color: var(--cover-color);
            overflow: hidden;
            border-left: var(--cover-border-left);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .book-back {
            transform: translateZ(calc(var(--half-thickness) * -1)) rotateY(180deg);
            background-color: var(--cover-color);
            overflow: hidden;
            border-right: 0.5px solid rgba(255, 255, 255, 0.4);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .book-spine {
            width: var(--book-thickness);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transform: translateX(calc(var(--half-thickness) * -1)) rotateY(-90deg);
            background-color: var(--cover-color);
            box-shadow: var(--spine-shadow);
            overflow: hidden;
            border-radius: 12px / 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .book-spine-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--spine-overlay-gradient);
            pointer-events: none;
            z-index: 2;
            border-radius: 12px / 0;
        }
        
        .book-spine-transition-left {
            position: absolute;
            width: 4.5px;
            height: 100%;
            left: -2px;
            top: 0;
            background: var(--spine-left-transition);
            z-index: 3;
            filter: blur(0.5px);
        }
        
        .book-spine-transition-right {
            position: absolute;
            width: 6.5px;
            height: 100%;
            right: -2px;
            top: 0;
            background: var(--spine-right-transition);
            z-index: 3;
            border-radius: 0 3px 3px 0;
            filter: blur(0.9px);
        }
        
        .book-front-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(135deg, 
                    rgba(255,255,255,0.35) 0%, 
                    rgba(255,255,255,0.2) 15%, 
                    rgba(255,255,255,0.05) 50%,
                    rgba(0,0,0,0.05) 85%),
                radial-gradient(
                    circle at 70% 20%, 
                    rgba(255,255,255,0.15) 0%, 
                    rgba(255,255,255,0) 60%);
            pointer-events: none;
            z-index: 2;
            border-radius: 5px;
            opacity: 0.9;
        }
        
        .book-back-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(45deg, 
                    rgba(0,0,0,0.25) 0%, 
                    rgba(0,0,0,0.15) 30%, 
                    rgba(0,0,0,0.05) 70%),
                radial-gradient(
                    circle at 30% 80%, 
                    rgba(255,255,255,0.1) 0%, 
                    rgba(255,255,255,0) 60%);
            pointer-events: none;
            z-index: 2;
            border-radius: 5px;
        }
        
        .book-pages-top {
            width: 100%;
            height: var(--book-thickness);
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(calc(var(--half-thickness) * -1)) rotateX(90deg);
            background-color: var(--pages-color);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
            background-size: auto, auto, 200px 200px, auto;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .book-pages-bottom {
            width: 100%;
            height: var(--book-thickness);
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translateY(var(--half-thickness)) rotateX(-90deg);
            background-color: var(--pages-bottom-color);
            background-size: auto, auto, 200px 200px, auto;
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .book-pages-right {
            width: var(--book-thickness);
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            transform: translateX(var(--half-thickness)) rotateY(90deg);
            background-color: var(--pages-side-color);
            background-size: auto, auto, 200px 200px, auto;
            box-shadow: 3px 0 7px rgba(0, 0, 0, 0.15);
            border-radius: 0 5px 5px 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .book-spine-front-connection {
            width: 30px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: var(--spine-front-connection);
            z-index: 4;
            filter: blur(0.3px);
        }
        
        .book-spine-back-connection {
            width: 6px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: linear-gradient(to left, 
                         rgba(255,255,255,0.01) 0%, 
                         rgba(255,255,255,0.2) 100%);
            z-index: 4;
            border-radius: 0 5px 5px 0;
            transform: rotateY(180deg);
            filter: blur(0.3px);
        }
        
        .book-cover-edge-highlight-top {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to bottom, 
                         rgba(0,0,0,0.4) 0%, 
                         rgba(0,0,0,0) 100%);
            z-index: 3;
            filter: blur(0.3px);
        }
        
        .book-cover-edge-highlight-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(to left, 
                         rgba(0,0,0,0.2) 0%, 
                         rgba(0,0,0,0) 100%);
            z-index: 3;
            filter: blur(0.3px);
        }
        
        .book-cover-edge-highlight-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1.5px;
            background: linear-gradient(to top, 
                         rgba(0,0,0,0.3) 0%, 
                         rgba(0,0,0,0) 100%);
            z-index: 3;
            filter: blur(0.3px);
        }
        
        .book-shadow {
            position: absolute;
            width: 95%;
            height: 45px;
            bottom: -75px;
            left: 2.5%;
            background: radial-gradient(ellipse at center, 
                         rgba(0,0,0,0.5) 0%, 
                         rgba(0,0,0,0.3) 40%,
                         rgba(0,0,0,0) 70%);
            border-radius: 50%;
            z-index: -1;
            filter: blur(15px);
            transform: rotateX(60deg) scale(1.2);
        }
        
        .preview-area-environment {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(
                circle at 30% 30%,
                rgba(50, 50, 50, 0.6) 0%,
                rgba(20, 20, 20, 1) 80%
            );
            z-index: -1;
        }
        
        .book-environment-highlight {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: radial-gradient(
                circle at 30% 30%,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0) 60%
            );
            pointer-events: none;
            z-index: 1;
        }
        
        /* 控制面板样式 */
        .panel-section {
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #444;
            padding-bottom: 1.5rem;
        }
        
        .panel-section:last-child {
            border-bottom: none;
        }
        
        .panel-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #f0f0f0;
        }
        
        .custom-file-input {
            display: none;
        }
        
        .custom-file-label {
            display: inline-block;
            padding: 0.5rem 1rem;
            background-color: #3b82f6;
            color: white;
            border-radius: 0.375rem;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }
        
        .custom-file-label:hover {
            background-color: #2563eb;
        }
        
        .aspect-ratio-indicator {
            font-size: 12px;
            color: #aaa;
            margin-top: 0.5rem;
        }
        
        .preview-thumbnail {
            max-width: 80px;
            max-height: 80px;
            margin-top: 0.5rem;
            border: 1px solid #444;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #333;
        }
        
        .preview-thumbnail img {
            max-width: 100%;
            max-height: 100%;
        }
        
        .control-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .control-button {
            background-color: #444;
            border: none;
            color: white;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        .control-button:hover {
            background-color: #555;
        }
        
        .control-button.reset {
            background-color: #555;
        }
        
        .control-button.reset:hover {
            background-color: #666;
        }
        
        .tool-tip {
            font-size: 12px;
            color: #888;
            margin-top: 0.75rem;
        }

        /* 厚度滑块样式 */
        .thickness-slider {
            width: 100%;
            margin: 1rem 0;
            background: #444;
            height: 6px;
            border-radius: 3px;
            -webkit-appearance: none;
            appearance: none;
            outline: none;
        }

        .thickness-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            transition: background 0.2s;
        }

        .thickness-slider::-webkit-slider-thumb:hover {
            background: #2563eb;
        }

        .thickness-slider::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            border: none;
            transition: background 0.2s;
        }

        .thickness-slider::-moz-range-thumb:hover {
            background: #2563eb;
        }

        .thickness-value {
            font-size: 14px;
            color: #bbb;
            margin-top: 0.5rem;
            text-align: center;
        }
        
        /* 主题切换按钮 */
        .theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        
        .theme-btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 0.375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .theme-btn.dark {
            background-color: #3a2159;
            color: white;
        }
        
        .theme-btn.light {
            background-color: #f0f0f0;
            color: #333;
        }
        
        .theme-btn.active {
            box-shadow: 0 0 0 2px #3b82f6;
            transform: scale(1.05);
        }

        @supports (transform-style: preserve-3d) {
            /* 为所有3D元素添加更好的渲染质量 */
            .book, .book-face, .book-spine, .book-pages-top, 
            .book-pages-bottom, .book-pages-right {
                /* 强制GPU渲染，减少锯齿 */
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .control-panel {
                width: 100%;
                max-height: 40vh;
            }
            
            .preview-area {
                height: 60vh;
            }
            
            .book-container {
                width: 270px; /* 移动端稍小的尺寸 */
                height: 396px; /* 增加10%高度：从360px到396px */
            }
        }