/* --- 基础设置 --- */
        :root {
            --primary-color: #ff9d00; /* 默认暖色 */
            --bg-color: #0a0a0a;
            --card-bg: rgba(20, 20, 20, 0.6); /* 半透明背景，透出一点底色 */
            --text-main: #ffffff;
            --text-sub: #aaaaaa;
        }

        body {
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: var(--text-main);
        }
   
        /* --- 卡片容器 (相对定位) --- */
        .profile-card {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            padding: 40px 30px;
            border-radius: 0px;
            /* 注意：这里不加 border，也不加 filter */
            background: var(--card-bg);
            backdrop-filter: blur(10px); /* 毛玻璃效果 */
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            overflow: hidden; /* 防止光晕溢出太远 */
            transition: transform 0.3s ease;
        }
        
        
         /* ===== 新增：PC端宽度控制 ===== */
        .profile-card {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px 24px;
            width: 100%;
            box-sizing: border-box;
        }

        /* 在超大屏幕上保持居中，但不再拉伸 */
        @media (min-width: 1200px) {
            .profile-card {
                padding: 30px 40px;
            }
        }

        /* 小屏幕适配 */
        @media (max-width: 768px) {
            .profile-card {
                padding: 16px;
            }
        }
        
        

        
 /* --- 第一层：纯特效层 (绝对定位) --- */
        .electric-border {
            max-width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 让鼠标事件穿透，不影响点击 */
            z-index: 0; /* 放在最底层 */
            border-radius: 0px;
            /* 初始发光 */
            box-shadow: 0 0 15px var(--primary-color), inset 0 0 10px var(--primary-color);
            transition: box-shadow 0.3s ease;
        }

        /* SVG 必须填满容器 */
        .electric-border svg {
            width: 100%;
            height: 100%;
            display: block;
        }
                /* SVG 矩形的样式 */
        .border-shape {
            fill: none; /* 中间透明 */
            stroke: var(--primary-color); /* 边框颜色 */
            stroke-width: 3px; /* 线条粗细 */
            /* 应用 SVG 滤镜 */
            filter: url(#electric-filter); 
        }

        /* --- 第二层：内容层 (相对定位) --- */
        .card-content {
            position: relative;
            z-index: 1; /* 确保在特效之上 */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        /* --- 内部组件样式 --- */
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.2);
            margin-bottom: 0px;
            background-color: #333; /* 占位色 */
        }

        .name {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 5px 0;
            letter-spacing: 1px;
        }

        .bio {
            font-size: 14px;
            color: var(--text-sub);
            margin: 0 0 30px 0;
            line-height: 1.5;
        }

       /* 3. 作品导航网格 */
        .nav-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            width: 100%;
            margin: 0 0 30px 0;
        }
        
        /* 电脑端（屏幕宽度 >= 1024px 时）：切换为 4 列 */
@media (min-width: 1024px) {
    .nav-grid {
        max-width: 1200px;
        grid-template-columns: repeat(4, 1fr);
    }
}
        

        .nav-item {
            
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            color: var(--text-main);
            font-size: 16px;
        }

        .nav-item:hover {
            background: var(--primary-color);
            color: #000;
            box-shadow: 0 0 15px var(--primary-color);
            transform: translateY(-2px);
        }
        
        /* 简单的切换按钮用于演示 */
        .theme-toggle {
            margin-top: 20px;
            background: none;
            border: 1px solid #555;
            color: #888;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 12px;
            border-radius: 20px;
        }
        .theme-toggle:hover { color: #fff; border-color: #fff; }
        
        
        
                /* --- 卡片通用样式 --- */
        .card-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            /* 这里的 filter 引用了下方定义的 SVG 滤镜 ID */
        }

        

        /* --- 能量边框层 (伪元素) --- */
        /* 这个层位于卡片背后，应用了 SVG 滤镜，看起来像发光的电线 */
        .energy-border {
            position: absolute;
            top: -4px; left: -4px; right: -4px; bottom: -4px;
            border-radius: 16px; /* 比卡片圆角稍大 */
            z-index: 1;
            /* 关键：应用 SVG 滤镜 */
            filter: url('#electric-filter'); 
        }

        /* --- Original (暖橙色) --- */
        .style-original .energy-border {
            border-radius: 50%;
            border: 2px solid #ffaa00;
            /* 叠加多层阴影制造强光感 */
            box-shadow: 
                0 0 10px #ffaa00,
                0 0 20px #ff6600,
                inset 0 0 10px #ffaa00;
            animation: flicker-orange 0.1s infinite alternate;
        }
        
        /* --- Hue (冷蓝色备用) --- */
        .style-hue .energy-border {
            border: 2px solid #00ccff;
            box-shadow: 
                0 0 10px #00ccff,
                0 0 20px #0066ff,
                inset 0 0 10px #00ccff;
            animation: flicker-blue 0.1s infinite alternate;
        }

        /* --- 动画定义 --- */
        /* 这里通过改变透明度模拟电压不稳的闪烁 */
        @keyframes flicker-orange {
            0% { opacity: 0.9; filter: url('#electric-filter') drop-shadow(0 0 5px #ffaa00); }
            100% { opacity: 1; filter: url('#electric-filter') drop-shadow(0 0 15px #ffaa00); }
        }
        @keyframes flicker-blue {
            0% { opacity: 0.9; filter: url('#electric-filter') drop-shadow(0 0 5px #00ccff); }
            100% { opacity: 1; filter: url('#electric-filter') drop-shadow(0 0 15px #00ccff); }
        }
        
        
        
          /* 3. 作品展示区 (Grid) */
        .portfolio-item-gk {
            aspect-ratio: 1;display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;position: relative;
        }

        /* --- 项目布局 --- */
        
        #gooey-button {
    padding: 1rem;
    font-size: 2rem;
    border: 10px;
    
    color: #0c1016;
    filter: url("#gooey");
    position: relative;
    background-color: #ff9d00
}

#gooey-button:focus {
    outline: 0
}

#gooey-button .bubbles {
    position: absolute;
    border-radius: 5px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

#gooey-button .bubbles .bubble {
    background-color: #ff9d00;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1
}

#gooey-button .bubbles .bubble:nth-child(1) {
    left: 13px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-1 3.02s infinite;
    animation: move-1 3.02s infinite;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

#gooey-button .bubbles .bubble:nth-child(2) {
    left: 18px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-2 3.04s infinite;
    animation: move-2 3.04s infinite;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

#gooey-button .bubbles .bubble:nth-child(3) {
    left: 71px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-3 3.06s infinite;
    animation: move-3 3.06s infinite;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

#gooey-button .bubbles .bubble:nth-child(4) {
    left: 35px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-4 3.08s infinite;
    animation: move-4 3.08s infinite;
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

#gooey-button .bubbles .bubble:nth-child(5) {
    left: 34px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-5 3.1s infinite;
    animation: move-5 3.1s infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

#gooey-button .bubbles .bubble:nth-child(6) {
    left: 36px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-6 3.12s infinite;
    animation: move-6 3.12s infinite;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

#gooey-button .bubbles .bubble:nth-child(7) {
    left: 91px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-7 3.14s infinite;
    animation: move-7 3.14s infinite;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s
}

#gooey-button .bubbles .bubble:nth-child(8) {
    left: 62px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-8 3.16s infinite;
    animation: move-8 3.16s infinite;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s
}

#gooey-button .bubbles .bubble:nth-child(9) {
    left: 57px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-9 3.18s infinite;
    animation: move-9 3.18s infinite;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s
}

#gooey-button .bubbles .bubble:nth-child(10) {
    left: 49px;
    width: 25px;
    height: 25px;
    -webkit-animation: move-10 3.2s infinite;
    animation: move-10 3.2s infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

@-webkit-keyframes move-1 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-109px)
    }

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

@keyframes move-1 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-109px)
    }

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

@-webkit-keyframes move-2 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-76px)
    }

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

@keyframes move-2 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-76px)
    }

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

@-webkit-keyframes move-3 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-125px)
    }

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

@keyframes move-3 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-125px)
    }

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

@-webkit-keyframes move-4 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-66px)
    }

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

@keyframes move-4 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-66px)
    }

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

@-webkit-keyframes move-5 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-74px)
    }

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

@keyframes move-5 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-74px)
    }

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

@-webkit-keyframes move-6 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-122px)
    }

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

@keyframes move-6 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-122px)
    }

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

@-webkit-keyframes move-7 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-80px)
    }

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

@keyframes move-7 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-80px)
    }

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

@-webkit-keyframes move-8 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-89px)
    }

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

@keyframes move-8 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-89px)
    }

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

@-webkit-keyframes move-9 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-72px)
    }

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

@keyframes move-9 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-72px)
    }

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

@-webkit-keyframes move-10 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-120px)
    }

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

@keyframes move-10 {
    0% {
        transform: translate(0,0)
    }

    99% {
        transform: translate(0,-120px)
    }

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










 /* ===== 书本布局卡片容器 ===== */
 .book {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   
    gap: 10px;
    max-width: 1200px;
    margin: 30px auto;
    width: 100%;
}
 
 
 
 
        .page {
            width: 280px;
            height: 310px;
            position: relative;
            border-radius: 4px 14px 14px 4px;
            cursor: pointer;
            flex-shrink: 0;
            overflow: visible;
            background: #d6cbb5;
            perspective: 1500px;
            transition: box-shadow 0.4s, transform 0.3s;
            transform-style: preserve-3d;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
        }

        .page:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 28px 56px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        .page.active {
            box-shadow: 0 0 40px rgba(80, 160, 255, 0.2), 0 20px 40px rgba(0, 0, 0, 0.7);
        }

        /* ===== 内部3D层 ===== */
        .page-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            border-radius: 4px 14px 14px 4px;
            overflow: visible;
        }

        /* ============================================================
           内页（正文）—— 翻开后在右边显示
           ============================================================ */
        .page-content {
            position: absolute;
            inset: 0;
            border-radius: 4px 14px 14px 4px;
            overflow: hidden;
            background: #f5efe6;
            background-image:
                radial-gradient(ellipse at 30% 40%, rgba(235, 225, 210, 0.4) 0%, transparent 70%),
                linear-gradient(180deg, #f5efe6 0%, #e8dfd2 100%);
            display: flex;
            flex-direction: row;
            padding: 0;
            z-index: 1;
            backface-visibility: hidden;
            transform: rotateY(0deg);
            box-shadow: inset 0 0 60px rgba(160, 140, 120, 0.12);
        }

        /* --- 左栏：标题 --- */
        .content-left {
            flex: 0 0 42%;
            background: rgba(255, 248, 240, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px 14px;
            text-align: center;
            position: relative;
            box-shadow: inset -8px 0 24px rgba(120, 100, 80, 0.08);
            border-right: 1px solid rgba(180, 160, 140, 0.15);
        }

        .content-left .page-num {
            position: absolute;
            bottom: 16px;
            left: 18px;
            font-size: 0.6rem;
            color: rgba(140, 120, 100, 0.3);
            font-family: 'Georgia', serif;
            letter-spacing: 0.5px;
            font-style: italic;
        }

        .content-left .name-icon {
            font-size: 2.8rem;
            margin-bottom: 6px;
            opacity: 0.6;
        }

        .content-left .name-large {
            font-size: 1.5rem;
            font-weight: 700;
            color: #3d3228;
            letter-spacing: 0.5px;
            line-height: 1.2;
            word-break: break-word;
            font-family: 'Georgia', 'Times New Roman', serif;
        }
        
        .name-large {
  writing-mode: vertical-rl; /* 文字从上到下，从右向左排列 */
}

        .content-left .name-sub {
            font-size: 0.6rem;
            color: rgba(140, 120, 100, 0.35);
            letter-spacing: 2px;
            margin-top: 6px;
            font-family: 'Segoe UI', sans-serif;
            text-transform: uppercase;
        }

        /* --- 右栏：详细内容 --- */
        .content-right {
            flex: 1;
            padding: 22px 20px 18px 18px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            background: rgba(255, 252, 245, 0.15);
            box-shadow: inset 8px 0 24px rgba(120, 100, 80, 0.05);
        }

        .content-right .page-num {
            position: absolute;
            bottom: 16px;
            right: 20px;
            font-size: 0.6rem;
            color: rgba(140, 120, 100, 0.3);
            font-family: 'Georgia', serif;
            letter-spacing: 0.5px;
            font-style: italic;
        }

        .content-right .detail-title {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            color: rgba(140, 120, 100, 0.3);
            margin-bottom: 8px;
            font-family: 'Segoe UI', sans-serif;
        }

        .content-right .detail-text {
            font-size: 0.82rem;
            line-height: 1.9;
            font-weight: 400;
            color: #4a3d32;
            margin-bottom: 14px;
            text-align: justify;
            text-justify: inter-ideograph;
            word-break: break-word;
            font-family: 'Georgia', 'Times New Roman', serif;
        }

        .content-right .detail-meta {
            font-size: 0.6rem;
            color: rgba(140, 120, 100, 0.35);
            border-top: 1px solid rgba(180, 160, 140, 0.15);
            padding-top: 10px;
            letter-spacing: 0.5px;
            font-family: 'Segoe UI', sans-serif;
        }

        /* ===== ✦ 新增：内容区链接样式 ===== */
        .detail-link {
            display: inline-block;
            margin-top: 10px;
            font-size: 0.65rem;
            font-weight: 400;
            color: rgba(100, 80, 65, 0.55);
            text-decoration: none;
            letter-spacing: 0.8px;
            font-family: 'Segoe UI', sans-serif;
            transition: color 0.3s, transform 0.2s, border-color 0.3s;
            border-bottom: 1.5px solid rgba(160, 140, 120, 0.15);
            padding-bottom: 3px;
            cursor: pointer;
            position: relative;
        }

        .detail-link::after {
            content: '→';
            display: inline-block;
            margin-left: 6px;
            transition: transform 0.25s ease;
            font-size: 0.75rem;
        }

        .detail-link:hover {
            color: #3d3228;
            border-bottom-color: rgba(140, 120, 100, 0.4);
            transform: translateX(2px);
        }

        .detail-link:hover::after {
            transform: translateX(4px);
        }

        .detail-link:active {
            transform: scale(0.96);
        }

        /* ===== 中间书缝线 ===== */
        .page-content::before {
            content: '';
            position: absolute;
            left: 42%;
            top: 4%;
            height: 92%;
            width: 2px;
            background: linear-gradient(to bottom,
                    rgba(160, 140, 120, 0.2) 0%,
                    rgba(140, 120, 100, 0.35) 30%,
                    rgba(140, 120, 100, 0.35) 70%,
                    rgba(160, 140, 120, 0.2) 100%);
            transform: translateX(-50%);
            z-index: 5;
            pointer-events: none;
            border-radius: 2px;
            box-shadow: 0 0 16px rgba(120, 100, 80, 0.08);
        }

        .page-content::after {
            content: '';
            position: absolute;
            left: 42%;
            top: 2%;
            height: 96%;
            width: 18px;
            transform: translateX(-50%);
            z-index: 4;
            pointer-events: none;
            background: radial-gradient(ellipse at center,
                    rgba(160, 140, 120, 0.06) 0%,
                    transparent 70%);
        }

        /* ============================================================
           封面 —— 双面设计
           正面：图片 + 名称
           背面：书籍信息（翻开后在左边显示）
           ============================================================ */
        .page-cover {
            position: absolute;
            inset: 0;
            border-radius: 4px 14px 14px 4px;
            transform-style: preserve-3d;
            transform-origin: left center;
            transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.9s ease;
            z-index: 2;
            cursor: pointer;
            will-change: transform;
        }

        /* ---- 封面正面 ---- */
        .cover-front {
            position: absolute;
            inset: 0;
            border-radius: 4px 14px 14px 4px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-color: #d6cbb5;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 22px 20px 26px;
            color: white;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
            background-image: var(--img, linear-gradient(145deg, #2b3f5a, #141f2e));
            backface-visibility: hidden;
            transform: rotateY(0deg);
            transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s ease;
        }

        .cover-front .page-number {
            position: absolute;
            top: 18px;
            right: 20px;
            font-size: 0.7rem;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(2px);
            padding: 4px 14px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0.5px;
            font-family: 'Georgia', serif;
            transition: opacity 0.5s;
        }

        .cover-front .name-display {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            padding: 10px 20px;
            border-radius: 60px;
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: #f0f6ff;
            align-self: flex-start;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            font-family: 'Georgia', serif;
            transition: opacity 0.5s;
        }

        .cover-front .name-display small {
            font-weight: 300;
            font-size: 0.7rem;
            opacity: 0.5;
            margin-left: 8px;
            letter-spacing: 0.3px;
            font-family: 'Segoe UI', sans-serif;
        }

        /* ---- 封面背面（翻开后在左边显示）优化版 ---- */
        .cover-back {
            position: absolute;
            inset: 0;
            border-radius: 4px 14px 14px 4px;
            overflow: hidden;
            background: linear-gradient(160deg, #f0e8dc, #dcd0c0);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 28px 22px;
            text-align: center;
            backface-visibility: hidden;
            transform: rotateY(180deg);
            box-shadow: inset 0 0 60px rgba(160, 140, 120, 0.15);
            border: 1px solid rgba(180, 160, 140, 0.08);
            transition: opacity 0.6s ease;
            font-family: 'Georgia', 'Times New Roman', serif;
        }

        /* 装饰外框 */
        .cover-back .back-frame {
            width: 100%;
            max-width: 170px;
            padding: 18px 14px 14px;
            border: 1px solid rgba(160, 140, 120, 0.15);
            border-radius: 6px;
            position: relative;
            background: rgba(255, 252, 245, 0.15);
            box-shadow: inset 0 0 20px rgba(160, 140, 120, 0.04);
        }

        /* 角落装饰 */
        .cover-back .back-frame::before,
        .cover-back .back-frame::after {
            content: '✦';
            position: absolute;
            font-size: 0.5rem;
            color: rgba(160, 140, 120, 0.25);
        }
        .cover-back .back-frame::before {
            top: 4px;
            left: 8px;
        }
        .cover-back .back-frame::after {
            bottom: 4px;
            right: 8px;
        }

        .cover-back .back-icon {
            font-size: 2.2rem;
            margin-bottom: 6px;
            opacity: 0.4;
            display: block;
        }

        .cover-back .back-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #3d3228;
            font-family: 'Georgia', serif;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        .cover-back .back-sub {
            font-size: 0.55rem;
            color: rgba(140, 120, 100, 0.4);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: 'Segoe UI', sans-serif;
            margin-bottom: 4px;
        }

        .cover-back .back-divider {
            width: 32px;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(160, 140, 120, 0.25), transparent);
            margin: 8px auto 6px;
        }

        .cover-back .back-number {
            font-size: 0.6rem;
            color: rgba(140, 120, 100, 0.25);
            font-family: 'Georgia', serif;
            font-style: italic;
            letter-spacing: 1px;
        }

        /* 底部小装饰 */
        .cover-back .back-footer {
            margin-top: 10px;
            font-size: 0.5rem;
            color: rgba(160, 140, 120, 0.15);
            letter-spacing: 3px;
            font-family: 'Segoe UI', sans-serif;
            text-transform: uppercase;
        }

        /* ---- 翻开状态 ---- */
        .page.active .page-cover {
            transform: rotateY(-170deg) translateX(-3px) scale(0.95);
            box-shadow: -20px 16px 48px rgba(0, 0, 0, 0.5);
        }

        .page.active .cover-front {
            opacity: 0.3;
        }

        .page.active .cover-front .page-number {
            opacity: 0.1;
        }

        .page.active .cover-front .name-display {
            opacity: 0.2;
        }

        .page.active .cover-back {
            opacity: 1;
        }

        /* ===== 书脊阴影 ===== */
        .page-inner::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 2%;
            height: 96%;
            width: 26px;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.45) 0%,
                    rgba(0, 0, 0, 0.15) 40%,
                    transparent 100%);
            border-radius: 20px 0 0 20px;
            filter: blur(6px);
            pointer-events: none;
            z-index: 10;
            opacity: 0.25;
            transition: opacity 0.7s ease, width 0.7s ease;
        }

        .page.active .page-inner::before {
            opacity: 0.85;
            width: 32px;
        }

        .page-inner::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 4px 14px 14px 4px;
            pointer-events: none;
            box-shadow: inset 0 -6px 20px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.15);
            z-index: 9;
            opacity: 0.25;
            transition: opacity 0.7s ease;
        }

        .page.active .page-inner::after {
            opacity: 0.7;
            box-shadow: inset 0 -8px 28px rgba(0, 0, 0, 0.25), 0 20px 50px rgba(0, 0, 0, 0.4);
        }

        /* 封面边缘厚度光效 */
        .cover-front::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s ease;
        }

        .page.active .cover-front::after {
            opacity: 0.4;
        }

        /* ===== 底部提示 ===== */
        .flip-hint {
            color: rgba(255, 255, 255, 0.25);
            font-size: 0.85rem;
            letter-spacing: 1.5px;
            font-weight: 300;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .flip-hint .page-info {
            color: rgba(255, 255, 255, 0.4);
            font-weight: 400;
        }

        .flip-hint .btn-reset {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.3);
            padding: 4px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.7rem;
            transition: all 0.3s;
            letter-spacing: 0.5px;
        }

        .flip-hint .btn-reset:hover {
            background: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.6);
        }

        /* ===== 响应式 ===== */
        @media (max-width: 700px) {
            .page {
                width: 190px;
                height: 250px;
            }
            .content-left .name-large {
                font-size: 1.2rem;
            }
            .content-left .name-icon {
                font-size: 2rem;
            }
            .content-right .detail-text {
                font-size: 0.68rem;
                line-height: 1.7;
            }
            .content-right {
                padding: 14px 14px 12px 12px;
            }
            .cover-front .name-display {
                font-size: 1rem;
                padding: 6px 14px;
            }
            .cover-back .back-title {
                font-size: 1rem;
            }
            .cover-back .back-icon {
                font-size: 1.8rem;
            }
            .cover-back .back-frame {
                padding: 14px 10px;
            }
            .book {
                gap: 30px 35px;
            }
            .detail-link {
                font-size: 0.55rem;
                margin-top: 8px;
            }
        }

        @media (max-width: 480px) {
            .page {
                width: 165px;
                height: 215px;
            }
            .content-left .name-large {
                font-size: 1.0rem;
            }
            .content-left .name-icon {
                font-size: 1.6rem;
            }
            .content-left .name-sub {
                font-size: 0.45rem;
            }
            .content-right .detail-text {
                font-size: 0.58rem;
                line-height: 1.6;
            }
            .content-right .detail-title {
                font-size: 0.5rem;
            }
            .content-right .detail-meta {
                font-size: 0.5rem;
            }
            .content-right {
                padding: 10px 10px 8px 8px;
            }
            .cover-front .name-display {
                font-size: 0.75rem;
                padding: 4px 10px;
            }
            .cover-front .page-number {
                font-size: 0.5rem;
                padding: 2px 8px;
                top: 10px;
                right: 12px;
            }
            .content-left .page-num {
                font-size: 0.5rem;
                bottom: 10px;
                left: 12px;
            }
            .content-right .page-num {
                font-size: 0.5rem;
                bottom: 10px;
                right: 14px;
            }
            .cover-back .back-title {
                font-size: 0.85rem;
            }
            .cover-back .back-icon {
                font-size: 1.4rem;
            }
            .cover-back .back-sub {
                font-size: 0.5rem;
            }
            .cover-back .back-frame {
                padding: 12px 8px;
            }
            .cover-back .back-number {
                font-size: 0.5rem;
            }
            .book {
                gap: 18px 20px;
            }
            .detail-link {
                font-size: 0.5rem;
                margin-top: 6px;
                padding-bottom: 2px;
            }
            .detail-link::after {
                font-size: 0.65rem;
                margin-left: 4px;
            }
        }
        
        
        
        
        
        
        
        
        
        
         /* 图片画廊通用容器基础样式 */
        .gallery-box {
            display: grid;
            width: 100%;
            max-width: 1200px;
            gap: 10px;
            /* 核心：统一所有布局的固定高度，确保完全填满不留白 */
            height: 480px; 
        }
        
        

/* 手机端样式（屏幕宽度 <= 767px 时生效） */
@media (max-width: 767px) {
    .gallery-box {
        /* 手机端高度：200px */
        height: 200px; 
        /* 手机端屏幕窄，建议稍微减小间距，让图片展示更紧凑 */
        gap: 5px; 
    }
}
        
        

        .photo-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            width: 100%;
            height: 100%;
            background-color: #e8e8e8;
        }

        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }
        
        .photo-item:hover img {
            transform: scale(1.02);
        }

        /* ========================================================== */
        /* 1图：单张大图居中 */
        /* ========================================================== */
        .layout-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }

        /* ========================================================== */
        /* 2图：左图 2/3，右图 1/3 */
        /* ========================================================== */
        .layout-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }

        /* ========================================================== */
        /* 3图：左大竖图 + 右侧上下两图均分填满 */
        /* ========================================================== */
        .layout-3 { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; }
        .layout-3 .photo-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
        .layout-3 .photo-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
        .layout-3 .photo-item:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }

       /* ========================================================== */
/* 4图：左侧大图(跨2行) + 右侧(2个) + 左下角(1个) */
/* ========================================================== */
.layout-4 {  grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr 1fr; height: 600px; /* 或 100% / auto */}

/* 左侧大图：占据第1列，跨越第1行和第2行 */
.layout-4 .photo-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; } 

/* 右侧上：占据第2列，第1行 */
.layout-4 .photo-item:nth-child(2) { grid-column: 2 / 3;  grid-row: 1 / 2; } 

/* 右侧下：占据第2列，第2行 */
.layout-4 .photo-item:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; } 

/* 左下角：占据第1列，第3行（修复了原来的 3/4 溢出问题） */
.layout-4 .photo-item:nth-child(4) { grid-column: 1 / 3;  grid-row: 3 / 4; } 
        /* ========================================================== */
        /* 5图：左侧大图(1/2宽全高) + 右侧4个田字格 */
        /* ========================================================== */
        .layout-5 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
        .layout-5 .photo-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; } /* 左侧大图 */
        .layout-5 .photo-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
        .layout-5 .photo-item:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
        .layout-5 .photo-item:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3; }
        .layout-5 .photo-item:nth-child(5) { grid-column: 3 / 4; grid-row: 2 / 3; }

        /* ========================================================== */
        /* 6图：你的原版专属排版 (绝对未修改) */
        /* ========================================================== */
        .layout-6 {
            grid-template-columns: 1fr 1.2fr 1fr;
            grid-template-rows: 1fr 1.2fr 1fr;
            grid-template-areas:
                "area-tl area-tr area-tr"
                "area-ml area-mc area-mr"
                "area-ml area-bl area-bl";
        }
        .layout-6 .photo-item:nth-child(1) { grid-area: area-tl; }
        .layout-6 .photo-item:nth-child(2) { grid-area: area-tr; }
        .layout-6 .photo-item:nth-child(3) { grid-area: area-ml; }
        .layout-6 .photo-item:nth-child(4) { grid-area: area-mc; }
        .layout-6 .photo-item:nth-child(5) { grid-area: area-mr; }
        .layout-6 .photo-item:nth-child(6) { grid-area: area-bl; }

        /* ========================================================== */
        /* 7图：上排4格，下排3格 (完全填满) */
        /* ========================================================== */
        .layout-7 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
        .layout-7 .photo-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
        .layout-7 .photo-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
        .layout-7 .photo-item:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
        .layout-7 .photo-item:nth-child(4) { grid-column: 4 / 5; grid-row: 1 / 2; }
        .layout-7 .photo-item:nth-child(5) { grid-column: 1 / 2; grid-row: 2 / 3; }
        .layout-7 .photo-item:nth-child(6) { grid-column: 2 / 4; grid-row: 2 / 3; } /* 底排中间横拉 */
        .layout-7 .photo-item:nth-child(7) { grid-column: 4 / 5; grid-row: 2 / 3; }

        /* ========================================================== */
        /* 8图：4列 x 2行 完美均分网格 */
        /* ========================================================== */
        .layout-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }

        /* ========================================================== */
        /* 9图：3列 x 3行 完美均分网格 */
        /* ========================================================== */
        .layout-9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr 1fr; }

       
    
        /* 图片画廊通用弹窗遮罩层样式 */
.modal-overlay {
    border: none;
    background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
}

/* 弹窗内容容器 */
.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

/* 弹窗内的图片自适应 */
#modalImg {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

/* 介绍文字样式 */
.modal-title {
    color: #fff;
    margin-top: 15px;
    font-size: 18px;
    text-align: center;
}

/* 关闭按钮样式 */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}