/* =========================================
   字体配置 (Pixel Fonts)
   ========================================= */

/* 1. 引入 Zpix - 完美的跨语言(CN/JP/EN)像素字体 */
/* 
   说明：Zpix 支持简繁日韩英，是目前最全的开源像素字体之一。
   由于 npm CDN 可能不稳定，这里直接引用 GitHub 托管库并通过 jsDelivr 加速。
*/
@font-face {
    font-family: 'Zpix';
    src: url('https://cdn.jsdelivr.net/gh/SolidZORO/zpix-pixel-font@master/dist/zpix.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. 引入 DotGothic16 (备用像素字体) */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 确保像素字体在各级标题下保持锐利，不被浏览器强制加粗导致模糊 */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
.nav-button,
.back-link,
.pill-toggle-text {
    font-weight: normal !important;
}

body {
    /* 
       字体优先级顺序：
       1. Zpix: 核心像素字体，支持中日英 (优先)
       2. DotGothic16: 备选日文像素字体 (Google Fonts)
       3. Silkscreen: 备选英文像素字体 (Google Fonts)
       4. 系统后备
    */
    font-family: 'Zpix', 'DotGothic16', 'Silkscreen', "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: normal;
    /* 像素字体建议保持常规粗细 */
    -webkit-font-smoothing: none;
    /* 禁用抗锯齿以保持像素锐利 */
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
    background-image:
        linear-gradient(#f0f0f0 1px, transparent 1px),
        linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
    color: #333;
    line-height: 1.6;
}

/* 主容器 */
.page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0;
    display: flex;
    gap: 0;
    background-color: transparent;
    box-shadow: none;
}

/* 侧边栏 */
.sidebar {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 40px;
    align-self: flex-start;
    min-height: 700px;
}

/* 侧边栏顶部 */
.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 40px;
}

/* Logo 圆形区域 */
.logo-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    background-color: transparent;
    text-decoration: none;
    color: #333;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.logo-text {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    text-align: center;
    width: 100%;
}

/* 
   Logo Tooltip (Redesigned)
   按键为: 主页(index)跳转链接图标按键 (.logo-circle)
   外观: 底部框架为明度偏高，饱和度偏低的灰粉色，文本内容为灰色
*/
.logo-circle::after {
    content: "回到主页";
    /* 固定文本 */
    position: absolute;
    top: 100%;
    /* 位于底部 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    background-color: #EFE6EA;
    /* 明度高(light)，饱和度低(grayish) 的粉色 */
    color: #666666;
    /* 文本灰色 */
    border: 1px solid #E6D8DD;
    /* 稍微深一点的边框增加精致感 */

    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Zpix', sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Tooltip Arrow */
.logo-circle::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    /* 配合 translateY(10px) 的偏移 */

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #E6D8DD;
    /* 匹配边框色 */

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 101;
}

/* 覆盖Arrow内部以实现边框效果 (可选，简化起见这里只用单色箭头，因为边框箭头比较复杂) */
/* 为了让箭头颜色匹配背景，使用 ::before 做背景色箭头可能更好，如果背景和边框颜色很接近，单色箭头即可 */
/* 这里修正箭头颜色为背景色 #EFE6EA，忽略细微边框差异，或者用 #E6D8DD 稍微强调一下 */

.logo-circle:hover::after,
.logo-circle:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* 导航按钮 */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nav-button {
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.nav-button:hover {
    background-color: #e9e9e9;
}

/* 侧边栏底部 */
.sidebar-bottom {
    margin-top: auto;
}

/* 语言选择 */
.sidebar-lang {
    margin-top: -20px;
    text-align: center;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-link {
    font-size: 12px;
    color: #ff6b9d;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lang-link:hover {
    color: #ff4785;
}

.lang-link-active {
    font-weight: bold;
    color: #ff6b9d;
}

.lang-toggle span {
    font-size: 12px;
    color: #ff6b9d;
}

/* 音乐播放器 */
.sidebar-player {
    font-size: 12px;
    color: #666;
    width: 100%;
    /* 确保容器宽度 */
}

/* =========================================
   自定义桌面端播放器 (Custom Desktop Player)
   ========================================= */
.custom-desktop-player {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    /* 浅灰底色 */
    border-radius: 999px;
    /* 胶囊形状 */
    padding: 8px 15px;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    /* 无阴影，保持扁平简洁 */
}

/* 播放按钮 */
.desk-btn-play {
    width: 28px;
    height: 28px;
    background: #e0e0e0;
    /* 稍深一点的灰色按钮背景 */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;
}

.desk-btn-play:hover {
    background: #d0d0d0;
}

/* 播放/暂停图标 CSS绘制 */
.desk-icon-play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #666;
    margin-left: 2px;
}

.desk-icon-pause {
    width: 8px;
    height: 10px;
    border-left: 3px solid #666;
    border-right: 3px solid #666;
}


/* 进度条容器 */
.desk-progress-wrapper {
    position: relative;
    flex: 1;
    height: 14px;
    /* Interactable height */
    display: flex;
    align-items: center;
}

/* 视觉进度条轨道 */
.desk-progress-track {
    width: 100%;
    height: 4px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    overflow: visible;
    /* Inherit */
}

/* 视觉进度填充详情 */
.desk-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #555;
    /* Darker gray */
    width: 0%;
    border-radius: 2px;
    pointer-events: none;
}

/* 进度条滑块 Thumb (visual) */
.desk-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    /* transition: left 0.05s linear; Removed for instant drag */
}

/* Tooltip (Time Display) */
.desk-tooltip {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -25px) scale(0.8);
    background-color: #333;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

/* Tooltip Arrow */
.desk-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* 交互滑块 (覆盖在上面，透明) */
.desk-seek-slider {
    position: absolute;
    top: -3px;
    left: 0;
    width: 100%;
    height: 20px;
    transform: none;
    /* Reset */
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 3;
}


/* 移动端隐藏桌面播放器 */
@media (max-width: 768px) {
    .custom-desktop-player {
        display: none !important;
    }
}

.player-label {
    margin-bottom: 5px;
}

/* 默认隐藏自定义播放器 (仅在移动端显示) */
.custom-mobile-player {
    display: none;
}

.audio-player {
    width: 100%;
    /* 隐藏原生音频控件 (因为我们使用了自定义UI并且移除了controls属性，但保留此样式以防万一) */
    display: none;
}

/* 主内容区 */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-left: 20px;
    min-height: 700px;
    overflow-y: auto;
}

/* 横幅区域 */
.banner {
    width: 100%;
    margin-bottom: 40px;
    height: 150px;
    /* 固定高度，确保各页面一致 */
    overflow: hidden;
    /* 防止图片溢出 */
    border-radius: 4px;
    position: relative;
    /* 建立定位上下文 */
    border: 1px solid #d0d0d0;
    /* 保持边框 */
    background-color: #e0e0e0;
    /* 加载前的背景色 */
}

/* 统一横幅图片样式 */
.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 核心：保持比例覆盖，自动裁剪 */
    object-position: center;
    /* 居中显示 */
    display: block;
}

.banner-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}

/* 主要内容 */
.main-content {
    padding: 40px;
    background-color: #ffffff;
    border-radius: 4px;
    text-align: center;
}

.main-content h1 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #666;
    font-weight: normal;
}

.main-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .page {
        /* 移除 flex-direction: column */
        /* 移除 flex-direction: column */
        display: block;
        padding-top: 1vh;
        /* 减少顶部留白 (1.5vh -> 1vh) */

        /* 修复响应式布局跳动问题 */
        margin: 10px auto;
        /* 强制覆盖桌面的 40px margin，保持与窄屏 (<480px) 一致的垂直位置 */
    }

    .sidebar {
        /* 非对称悬浮布局核心 */
        position: fixed;
        /* 置顶于页面之上 */
        z-index: 1000;

        /* 空间定位：非对称间距 */
        top: 1vh;
        /* 顶部呼吸感进一步减少 (1.5vh -> 1vh) */
        bottom: 15vh;
        /* 底部重心抬高 */
        left: 2vw;
        /* 左侧极窄缝隙 */
        right: auto;
        /* 不设右侧，让其自然收缩 */

        /* 宽度控制 */
        width: auto;
        /* 垂直条状自然宽度 */
        max-width: 50vw;
        /* 自适应最大宽度不超过 50% */
        min-width: 120px;
        /* 保证最小可读性 */

        /* 布局重置：强制垂直排列 */
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        /* 从上倒下排列 */
        align-items: center;
        gap: 20px;

        /* 视觉表现：悬浮感与描边 */
        border-radius: 12px;
        /* 灰色模糊渐变描边效果 (通过 box-shadow 模拟) */
        /* 1. 内部浅边框 */
        /* 2. 外部深色阴影增加浮起感 */
        /* 3. 底部更深的阴影形成重心 */
        box-shadow:
            0 0 0 1px rgba(180, 180, 180, 0.4),
            /* 模拟边框 */
            0 8px 20px rgba(0, 0, 0, 0.1),
            /* 整体柔和阴影 */
            0 15px 35px rgba(0, 0, 0, 0.15);
        /* 底部加深 */

        /* 背景保持，或者可以微调透明度 */
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        /* 磨砂玻璃质感 */

        /* 允许按钮溢出显示 */
        overflow: visible;
        transition: transform 0.5s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    }

    /* 收起状态: 完全移出屏幕 (包含阴影) */
    .sidebar.collapsed {
        /* 核心改动：不再使用透明度隐藏，而是物理移出屏幕 */
        /* 额外多移出 60px，确保宽大的阴影也完全离开视口 */
        transform: translateX(calc(-100% - 60px));

        /* 移除之前的 hack，保持样式一致性，避免闪烁 */
        /* box-shadow, backdrop-filter 均保留，让其自然滑出 */
    }

    .sidebar.collapsed * {
        pointer-events: none;
    }

    /* 按钮 "差动位移" (Differential Transform) */
    .sidebar.collapsed .sidebar-toggle {
        pointer-events: auto;
        /* 
           1. rotate(180deg): 翻转箭头
           2. translateX(50px): 
              父级向左移了 (100% + 60px)。
              按钮需要向右“抵消”一部分移动，使其停留在屏幕边缘。
              50px 的数值经过调试，能让按钮刚好露出的 4/5 身位。
              (如果您觉得露太多或太少，微调这个 px 值即可)
        */
        transform: translateX(50px) rotate(180deg);
    }

    /* 像素风格箭头按钮 (Pixel Art Arrow Button) */
    .sidebar-toggle {
        position: absolute;
        right: -20px;
        /* 悬挂在右侧边缘 */
        bottom: 120px;
        /* 向上移动以避开底部播放器 (原60px -> 120px) */
        width: 40px;
        height: 40px;
        background-color: #FF6B9D;
        /* 标志性粉色 */
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 1100;
        /* 高于 sidebar */
        /* 简单的按压效果 */
        transition: transform 0.1s;
    }

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

    .sidebar.no-transition {
        transition: none !important;
    }

    .sidebar.no-transition .sidebar-toggle {
        transition: none !important;
    }

    .sidebar-toggle::after {
        content: '';
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 12px solid #ffffff;
        /* 白色左指箭头 */
        margin-right: 4px;
        /* 视觉修正 */
    }

    .sidebar-top {
        /* 保持垂直 */
        flex-direction: column;
        gap: 20px;
    }

    .logo-circle {
        width: 80px;
        /* 稍微缩小以适应移动端 */
        height: 80px;
    }

    .sidebar-nav {
        /* 强制垂直 */
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
    }

    .nav-button {
        width: 100%;
        /* 占满 sidebar 宽度 */
        padding: 12px 10px;
        /* 增加点击区域 */
    }

    .sidebar-bottom {
        /* 保持垂直 */
        flex-direction: column;
        margin-top: auto;
        width: 100%;
        gap: 20px;
    }

    /* 语言切换按钮下移 */
    .sidebar-lang {
        margin-top: 20px;
        /* 增加与上方播放器的间距 */
    }

    /* 隐藏默认播放器，使用自定义像素播放器 */
    .audio-player {
        display: none !important;
    }

    /* 自定义移动端像素播放器容器 */
    .custom-mobile-player {
        display: flex !important;
        /* 移动端显示 */
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background-color: #f5f5f5;
        /* 浅灰底色 */
        border-radius: 20px;
        /* 圆角胶囊形状 */
        padding: 5px 10px;
        box-sizing: border-box;
        border: 1px solid #e0e0e0;
        gap: 8px;
    }

    /* 播放按钮 */
    .pixel-btn-play {
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* 播放图标 (纯CSS绘制三角形) */
    .pixel-icon-play {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid #999;
        /* 灰色图标 */
    }

    /* 暂停图标 */
    .pixel-icon-pause {
        width: 10px;
        height: 12px;
        border-left: 3px solid #999;
        border-right: 3px solid #999;
    }

    /* 进度条容器 */
    .pixel-progress-container {
        flex: 1;
        /* 占据剩余空间 */
        height: 4px;
        background-color: #ddd;
        /* 轨道颜色 */
        border-radius: 2px;
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /* 进度条填充 */
    .pixel-progress-bar {
        width: 0%;
        /* 动态控制 */
        height: 100%;
        background-color: #999;
        /* 填充颜色 */
        border-radius: 2px;
    }

    /* 进度条滑块 (Thumb) */
    .pixel-progress-thumb {
        width: 8px;
        height: 12px;
        background-color: #999;
        position: absolute;
        left: 0%;
        /* 跟随进度 */
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 2px;
        pointer-events: none;
        /* 让点击穿透到 container */
    }

    /* Menu button removed */

    /* 优化播放器在窄屏下的显示 */
    .sidebar-player {
        width: 120%;
        /* 增加容器宽度 */
        margin-left: -10%;
        /* 向左偏移以居中 */
        transform: scale(0.85);
        /* 整体缩小以适应窄侧边栏 */
        transform-origin: center center;
    }

    /* 主内容区域 - 居中悬浮卡片 (Centered Floating Card) */
    .content {
        /* 脱离侧边栏挤压，独立居中 */
        display: block;

        /* 尺寸定位 */
        width: 94vw;
        /* 增加宽度至 94%，仅留极窄缝隙 */
        margin: 0 auto;
        /* 水平居中 */
        margin-top: 0;
        /* 进一步减少顶部留白 (1vh -> 0)，利用 padding-top 1vh 即可 */
        margin-bottom: 20vh;
        /* 底部呼吸感 */

        /* 高度与溢出 */
        min-height: 80vh;
        height: auto;
        overflow: visible;
        /* 允许内容自然延伸 */

        /* 层级与视觉 */
        position: relative;
        z-index: 100;
        /* 低于导航栏 (1000) */

        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

    /* 移除之前的 flex-direction: row 样式，避免冲突 */

    /* 作品展示页面响应式 */
    .works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 委托页面响应式 */
    .pricing-table {
        font-size: 14px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 8px;
    }

    /* 其他事项页面响应式 */
    .social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .social-item {
        flex: 1;
        min-width: 100px;
        text-align: center;
    }
}

/* 小屏幕设备响应式 */
@media (max-width: 480px) {
    .page {
        margin: 10px;
        padding: 10px;
    }

    .sidebar-nav {
        flex-direction: column;
    }

    .nav-button {
        width: 100%;
    }

    .sidebar-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .banner-placeholder {
        height: 150px;
    }

    /* 作品展示页面响应式 */
    .works-grid {
        grid-template-columns: 1fr;
    }

    /* 委托页面响应式 */
    .pricing-table {
        font-size: 12px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 6px;
    }
}

/* =========================================
   委托页面 (Commission Page) 特有样式
   ========================================= */
.commission-form {
    margin-top: 20px;
}

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

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-textarea {
    height: 150px;
    resize: vertical;
}

.form-submit {
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-submit:hover {
    background-color: #e9e9e9;
}

.pricing-table {
    margin: 20px 0;
    width: 100%;
    border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.pricing-table th {
    background-color: #f9f9f9;
}

/* =========================================
   其他事项页面 (Other Page) 特有样式
   ========================================= */
.faq-section {
    margin-top: 20px;
}

.faq-item {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.faq-question {
    font-weight: bold;
    margin-bottom: 10px;
}

.faq-answer {
    color: #666;
}

.social-links {
    margin-top: 20px;
}

.social-item {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}


/* =========================================
   作品展示页面 (Sample Page) 特有样式
   ========================================= */
/* 胶囊切换器样式 */
.pill-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 12px;
    /* 下移处理: -10px -> 20px (下移约30px) */
    width: 100%;
    max-width: 350px;
}

/* .main-content 规则已移除，因为为空 */

/* 特殊处理：如果是 sample 页面，main-content padding 可能需要调整 */
body[data-page="sample"] .main-content {
    padding: 20px;
    /* 保持一定的内边距 */
}

.content .banner {
    margin-bottom: 12px;
}

.pill-toggle {
    position: relative;
    width: 100%;
    height: 56px;
    border-radius: 28px;
    background-color: #ffffff;
    /* 修改为白色以净化半透明叠加层的色彩 */
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    border: 2px solid #FFDEE9;
    /* 添加低饱和粉色描边 */
    box-sizing: border-box;
    /* 确保边框不增加整体尺寸 */
}

/* 选中底图 */
.pill-toggle-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70%;
    /* 移除黑色背景以消除边缘灰线 (Fix gray line artifact) */
    background-color: transparent;
    border-radius: 26px;
    /* 稍微减小圆角以适应边框 (28px - 2px) */
    transition: all 0.3s ease;
    z-index: 1;
    overflow: hidden;
    /* 尝试修复子像素渲染问题 */
    transform: translateZ(0);
}

/* GIF动画容器 */
/* 背景动画层通用样式 */
.pill-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: none;
    /* 动画由 animation 控制 */
    z-index: 1;
    background-size: 100px 100px;
    /* 调整纹理大小 */
    pointer-events: none;
    border-radius: 26px;
    /* 对应调整圆角 */
}

/* Layer A: 可爱风格 - 对角线移动 (通过旋转实现) */
.layer-a {
    background-image: url('assets/bg_a.png');
    background-size: 200px 200px;
    /* 匹配 State B 尺寸 */

    /* 旋转容器以实现对角线纹理和滚动方向 */
    position: absolute;
    width: 200%;
    /* 增加高度以覆盖旋转后的宽胶囊区域 (400% -> 1000%) */
    height: 1000%;
    /* 足够大以覆盖旋转后的区域 */
    left: -50%;
    /* 重新计算中心点: 50% - (1000%/2) = -450% */
    top: -450%;

    animation: scroll-horizontal-large 12s linear infinite;
    /* 水平滚动 => 旋转后变为对角线滚动 */
    transform-origin: center center;

    /* 初始状态 (Exit State) */
    opacity: 0;
    transform: rotate(45deg) scale(0.8);

    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Layer B: 精致风格 - 水平移动 */
.layer-b {
    background-image: url('assets/bg_b.png');
    background-size: 200px 200px;
    width: 100%;
    /* 确保填满容器 */
    height: 100%;
    /* 确保填满容器 */
    animation: scroll-horizontal-large 12s linear infinite;
    transform-origin: center center;
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.8);
}

/* 进场 (Forward) - 状态变为可见 */
.layer-enter {
    opacity: 1;
    /* 注意：Layer A 需要保留旋转 */
}

/* 特殊处理 Layer A 的进场 transforms */
.layer-a.layer-enter {
    transform: rotate(45deg) scale(1);
}

.layer-a.layer-exit {
    transform: rotate(45deg) scale(0.8);
}

/* Layer B 不需要旋转 */
.layer-b.layer-enter {
    transform: scale(1);
}

.layer-b.layer-exit {
    transform: scale(0.8);
}

/* 移除旧的通用 layer-enter/exit，防止冲突 */
/* (上面的特定选择器权重更高，应该没问题，但为了整洁可以移除通用的) */

/* 移除旧的 keyframes fade-scale-in/out，因为改用 transition */

@keyframes scroll-diagonal {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px;
    }
}

@keyframes scroll-horizontal {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 0;
    }
}

@keyframes scroll-horizontal-large {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}

/* 轨道背景层通用样式 */
.track-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    /* 在底图之下 */
    background-size: 200px 200px;
    pointer-events: none;
    border-radius: 28px;
}

/* 轨道背景 A (复用 Layer A 样式逻辑) */
.track-layer-a {
    background-image: url('assets/bg_a.png');

    /* 旋转容器以实现对角线纹理 (与 Layer A 保持一致) */
    position: absolute;
    width: 200%;
    /* 增加高度以覆盖旋转后的宽胶囊区域 */
    height: 1000%;
    left: -50%;
    /* 重新计算中心点 */
    top: -450%;

    animation: scroll-horizontal-large 12s linear infinite;
    transform-origin: center center;
    transform: rotate(45deg);
}

/* 轨道背景 B (复用 Layer B 样式逻辑) */
.track-layer-b {
    background-image: url('assets/bg_b.png');
    animation: scroll-horizontal-large 12s linear infinite;
}

/* 状态控制：因为 track layer 是在 .pill-toggle 下，我们可以利用 state 类来控制 */

/* 当处于 State A (左侧激活) 时，显示右侧的 B 轨道背景 (降低不透明度) */
.pill-toggle-state-A .track-layer-b {
    opacity: 0.3;
    /* 降低不透明度 */
}

/* 当处于 State B (右侧激活) 时，显示左侧的 A 轨道背景 (降低不透明度) */
.pill-toggle-state-B .track-layer-a {
    opacity: 0.3;
    /* 降低不透明度 */
}


/* 选项内容 */
.pill-toggle-option {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.pill-toggle-option-a {
    left: 0;
    right: 30%;
}

.pill-toggle-option-b {
    left: 70%;
    right: 0;
}

/* 选项文本 */
.pill-toggle-text {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 默认隐藏非激活侧文本 */
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateY(0);
}

.pill-toggle.initialized .pill-toggle-text {
    transition: opacity 0.3s ease;
}

/* 状态A样式 */
.pill-toggle-state-A .pill-toggle-bg {
    left: 0;
    right: 30%;
    background-color: #ffffff;
    /* 确保背景为白色 */
}

.pill-toggle-state-A .pill-toggle-option-a {
    left: 0;
    right: 30%;
    padding: 0 16px;
}

.pill-toggle-state-A .pill-toggle-option-b {
    left: 70%;
    right: 0;
    padding: 0 8px;
}

.pill-toggle-state-A .pill-toggle-option-a .pill-toggle-text {
    font-size: 14px;
    font-weight: bold;
    color: #FF6B9D;
    /* 覆盖为粉色文本以提高可读性 */
    opacity: 1;
    transform: translateY(0);
}

.pill-toggle-state-A .pill-toggle-option-b .pill-toggle-text {
    font-size: 10px;
    opacity: 0;
    transform: translateY(8px);
}

/* 状态B样式 */
.pill-toggle-state-B .pill-toggle-bg {
    left: 30%;
    right: 0;
    background-color: #2E2E2E;
    /* 添加深色底色以配合浅色纹理和白色文字 */
}

.pill-toggle-state-B .pill-toggle-option-a {
    left: 0;
    right: 70%;
    padding: 0 8px;
}

.pill-toggle-state-B .pill-toggle-option-b {
    left: 30%;
    right: 0;
    padding: 0 16px;
}

.pill-toggle-state-B .pill-toggle-option-a .pill-toggle-text {
    font-size: 10px;
    opacity: 0;
    transform: translateY(8px);
}

.pill-toggle-state-B .pill-toggle-option-b .pill-toggle-text {
    font-size: 14px;
    opacity: 1;
    /* 激活时显示 */
    transform: translateY(0);
}



/* 悬停效果 */
.pill-toggle:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 内容容器 */
/* 内容容器 */
.pill-content-container {
    margin: 20px auto;
    /* 上间距控制与Toggle的距离 (16px -> 20px) */
    max-width: 1000px;
    width: 95%;

    /* 新增容器样式 */
    background-color: rgb(249, 249, 249);
    padding: 20px 0 40px;
    /* 上下内边距，确保包裹内容 */
    border-radius: 12px;
    /* 圆角 (可选，提升视觉) */
}

.pill-content {
    padding: 20px;
    background-color: #f9f9f9;
    /* 提高底部托盘亮度 (#f5f5f5 -> #f9f9f9) */
    border-radius: 8px;
    text-align: center;
}

.pill-content-b {
    display: none;
}

/* 移动端自适应 */
@media (max-width: 768px) {
    .pill-toggle-container {
        /* 移动端: 垂直居中 (上下各 20px), 固定宽度 280px (比 350px 窄 1/5) */
        margin: 20px auto;
        width: 280px;
        max-width: 100%;
        padding: 0;
    }

    .pill-toggle {
        height: 48px;
        border-radius: 24px;
    }

    .pill-toggle-bg {
        border-radius: 24px;
    }

    .pill-toggle-gif-img {
        border-radius: 24px;
    }

    .pill-toggle-text {
        font-size: 12px !important;
    }

    .pill-toggle-state-A .pill-toggle-option-b .pill-toggle-text,
    .pill-toggle-state-B .pill-toggle-option-a .pill-toggle-text {
        font-size: 8px !important;
    }

    .pill-toggle-state-A .pill-toggle-option-a,
    .pill-toggle-state-B .pill-toggle-option-b {
        padding: 0 12px !important;
    }

    .pill-toggle-state-A .pill-toggle-option-b,
    .pill-toggle-state-B .pill-toggle-option-a {
        padding: 0 6px !important;
    }

    .pill-content-container {
        max-width: 90%;
    }

    /* 保持移动端紧凑间距 */
    .sample-description-box {
        margin: 10px auto 30px !important;
    }
}

/* =========================================
   Sample Page - Carousel & Details (State A)
   
   Updated for Carousel System
   ========================================= */

/* 1. 描述文本框 */
.sample-description-box {
    background-color: rgb(241, 238, 238);
    /* RGB [241, 238, 238] */
    padding: 30px 40px;
    margin: 20px auto 40px;
    /* 减少顶部间距: 50px -> 20px (因外部已有容器) */
    /* 增加顶部间距: 10px -> 50px 以增加呼吸感 */
    width: 95%;
    max-width: 600px;
    /* 缩窄宽度为 600px */
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.desc-line {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 4px 0;
}

/* 轮播层切换逻辑 */
.layer-enter {
    opacity: 1 !important;
    transform: scale(1);
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    display: block;
}

.layer-exit {
    opacity: 0 !important;
    transform: scale(0.95);
    pointer-events: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    /* 暂用display none简化布局重叠问题 */
}

/* 2. 轮播组件容器 */
.carousel-container {
    position: relative;
    width: 100%;
    /* 增大轮播器整体尺寸 */
    max-width: 900px;
    /* 600px -> 900px */
    height: 500px;
    /* 240px -> 400px -> 500px (Fix clipping) */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: hidden;  为了显示左右预览，不能直接 hidden，或者要有 padding */
    overflow: hidden;
}

/* 导航箭头 */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    /* 增大按键点击区域 (60px -> 80px) */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    color: #E0E0E0;
    /* 浅灰色箭头 */
    transition: all 0.3s ease;
    background: transparent;
    /* 无背景 */
    image-rendering: pixelated;
    /* 强制像素化渲染 (配合像素风 SVG) */
    border: none;
    /* 移除默认边框 */
    outline: none;
    /* 移除聚焦轮廓 */
}

.carousel-nav svg {
    width: 48px;
    /* 增大图标尺寸 (36px -> 48px) */
    height: 48px;
    shape-rendering: crispedges;
    /* 确保边缘清晰 */
}

.carousel-nav:hover {
    color: #FFDEE9;
    /* 悬停粉色 */
}

.nav-prev {
    left: 0;
}

.nav-next {
    right: 0;
}

/* 轮播轨道容器 */
.carousel-track-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    /* 透视效果 */
}

/* 轮播轨道 */
.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

/* 滑块样式 */
.carousel-slide {
    position: absolute;
    /* 移除固定宽高，由内部 img 的 JS 计算值决定 */
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* 默认隐藏状态 */
    opacity: 0;
    transform: scale(0.6) translateX(0);
    z-index: 1;

    /* 移除背景色和文字样式，由 img 接管 */
    background: transparent;
}

/* 图片样式：核心适配逻辑 */
.carousel-slide img {
    /* 移除 100% 强制尺寸，由 JS 设置具体 px */
    width: auto;
    height: auto;
    display: block;

    /* 禁止被选中或拖拽 (防止变蓝和拖动鬼影) */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    /* 响应式安全边界 (重要！防止在小屏上溢出) */
    max-width: 80vw;
    /* 屏幕宽度的 80% */
    max-height: 60vh;
    /* 屏幕高度的 60% */

    /* 阴影应用在图片本身 (非透明部分)，实现自适应包裹 */
    /* 进一步减小扩散半径，避免裁剪 */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ... (skip middle) ... */



/* 禁用动画辅助类 */
.no-transition {
    transition: none !important;
}

/* 激活状态 (中间) */
.slide-active {
    opacity: 1;
    transform: scale(1.1) translateX(0);
    z-index: 10;
    cursor: pointer;
    /* 移除容器 box-shadow */
}

/* 激活状态下的图片效果 */
.slide-active img {
    /* 增强阴影，保持紧凑 */
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
}

/* 悬停时放大效果 */
.slide-active:hover {
    transform: scale(1.15) translateX(0);
}

.slide-active:hover img {
    /* 悬停时阴影更重 */
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.25));
}

/* 左侧预览 (上一张) */
.slide-prev {
    opacity: 0.3;
    /* 增大间距: 340px -> 420px */
    transform: scale(0.85) translateX(-420px);
    z-index: 5;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 50%, black 100%);
}

/* 右侧预览 (下一张) */
.slide-next {
    opacity: 0.3;
    /* 增大间距: 340px -> 420px */
    transform: scale(0.85) translateX(420px);
    z-index: 5;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 50%, black 100%);
    mask-image: linear-gradient(to left, transparent 0%, black 50%, black 100%);
}

/* 隐藏其他滑块 */
.slide-hidden {
    opacity: 0;
    transform: scale(0.5);
    z-index: 0;
    pointer-events: none;
}



/* 3. 底部详细信息 */
.sample-details {
    text-align: center;
    margin-top: 0px;
    padding-bottom: 20px;
}

.sample-title-large {
    font-size: 36px;
    font-weight: bold;
    color: #888;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.sample-price-row {
    font-size: 20px;
    color: #666;
    margin-bottom: 12px;
    font-family: monospace;
    font-weight: bold;
    letter-spacing: 1px;
}



/* =========================================
   作品详情页结构调整
   ========================================= */

.main-content {
    position: relative;
    /* 核心：允许内部元素绝对定位 */
    padding-top: 50px !important;
    /* 为置顶的返回链接预留空间 */
}

/* =========================================
   返回链接 (Detail Pages)
   ========================================= */

.back-link-container {
    position: absolute;
    top: -10px;
    left: 0;
    margin: 0;
    /* 移除之前的负边距 */
    z-index: 100;
}

/* ... (skip content) ... */

@media (max-width: 768px) {

    /* 移动端返回按钮保持贴边 (用户觉得这个视觉效果很好) */
    .back-link-container {
        top: 0;
    }
}

.back-link {
    color: #FFB6C1;
    /* 浅粉色 */
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 2px 5px;
}

.back-link:hover {
    color: #FF6B9D;
    /* 悬停颜色加深 */
    transform: translateX(-3px);
    /* 轻微向左移动 */
    text-shadow: 0 0 5px rgba(255, 107, 157, 0.2);
}

/* =========================================
   作品展示页详情 (Sample Details)
   ========================================= */

.sample-description-box {
    background-color: rgb(241, 238, 238);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #eee;
    text-align: left;
}

.desc-line {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
}

.desc-line:last-child {
    margin-bottom: 0;
}

.sample-details {
    margin-top: 25px;
    text-align: center;
}

.sample-title-large {
    font-size: 24px;
    color: #ff6b9d;
    margin-bottom: 15px;
}

/* 价格行样式 */
.sample-price-row {
    font-family: 'Zpix', 'DotGothic16', 'Silkscreen', sans-serif;
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    /* 像素模拟加粗：使用 1px 阴影增强存在感 */
    text-shadow: 1px 0 0 currentColor;
}

.price-label {
    color: #888;
    font-size: 14px;
}

.price-value {
    color: #ff6b9d;
    font-size: 24px;
}

.price-currency {
    color: #888;
    font-size: 12px;
}

.sample-more-hint {
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
}

/* 侧边栏布局微调以确保高度统一 */
.sidebar {
    min-height: 720px;
}

/* =========================================
   主页社交链接 (Homepage Social Links)
   ========================================= */
.social-links-home {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* 宽间距 */
    margin-top: 40px;
    flex-wrap: wrap;
}

/* =========================================
   Standalone Player CSS (Migrated)
   ========================================= */

/* Sidebar Player Container */
.sidebar-player {
    /* Global Variables for this component */
    --theme-bg: #f5f5f5;
    --player-bg: rgb(246, 246, 246);
    --accent-pink: rgb(255, 180, 210);
    /* Adjusted to be visible as text but still pink. Original light pink is too invisible on white. */
    --accent-pink-light: rgb(255, 235, 242);
    /* For background/buttons */
    --icon-color: #a0a0a0;
    --track-bg: #e5e5e5;

    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    /* Stack player and title */
    justify-content: center;
    align-items: center;
}

/*
   Desktop Custom Player
   ---------------------
   A minimal capsule design: [ Controls | Progress Bar ]
   High brightness, low saturation Pink & Gray Theme
*/
.custom-desktop-player {
    display: flex;
    align-items: center;
    background: var(--player-bg);
    padding: 6px 10px;
    border-radius: 30px;
    gap: 4px;
    width: 100%;
    max-width: 240px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02);
    height: 40px;
    box-sizing: border-box;
    position: relative;
}

/* Control Group */
.desk-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Common Control Button Styles */
.desk-btn-control {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.desk-btn-control:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* Play/Pause Button - Main Action */
.desk-btn-play {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-pink-light);
    /* Use the lighter pink for button */
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.1s, background-color 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.desk-btn-play:hover {
    transform: scale(1.05);
    background: #ffeef5;
    /* slightly lighter than light */
}

/* Icons shapes */
.desk-icon-play {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid var(--icon-color);
    margin-left: 2px;
}

.desk-icon-pause {
    width: 8px;
    height: 9px;
    border-left: 3px solid var(--icon-color);
    border-right: 3px solid var(--icon-color);
}

.desk-icon-prev {
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-right: 6px solid var(--icon-color);
    position: relative;
    margin-right: 1px;
}

.desk-icon-prev::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -2px;
    width: 2px;
    height: 6px;
    background: var(--icon-color);
}

.desk-icon-next {
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 6px solid var(--icon-color);
    position: relative;
    margin-left: 1px;
}

.desk-icon-next::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -2px;
    width: 2px;
    height: 6px;
    background: var(--icon-color);
}


/* Progress Wrapper */
.desk-progress-wrapper {
    flex-grow: 1;
    height: 10px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 4px;
}

/* Background Track */
.desk-progress-track {
    width: 100%;
    height: 4px;
    background: var(--track-bg);
    border-radius: 2px;
    overflow: hidden;
}

/* Fill */
.desk-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent-pink-light);
    transition: width 0.1s linear;
}

/* Interaction Slider (Invisible) */
.desk-seek-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 10;
}

/* Thumb */
.desk-progress-thumb {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border: 2px solid var(--accent-pink-light);
    border-radius: 50%;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: left 0.1s linear;
}

/* Tooltip */
/* Tooltip (Time Display) - Redesigned */
.desk-tooltip {
    position: absolute;
    top: -25px;
    /* Move closer to the track (original was -30px) */
    left: 50%;
    transform: translateX(-50%);
    /* Removed scale(0.8) for better legibility and vertical shift logic */

    background-color: #FFF0F5;
    /* LavenderBlush */
    color: #777777;
    /* Gray text */
    padding: 4px 8px;
    /* Tight padding */
    border-radius: 0;
    /* Rectangular */

    font-size: 10px;
    font-family: monospace;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Track Title - Moved below player */
/* Track Title - Moved below player */
.desk-track-title {
    margin-top: 4px;
    /* Gap between player and title */
    font-size: 10px;
    color: var(--accent-pink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    /* Centered */
    font-family: 'DotGothic16', sans-serif;
    cursor: default;
}

/* Tooltip Arrow Removed */
.desk-tooltip::after {
    content: none;
    display: none;
}

.social-link-item {
    position: relative;
    /* 用于 tooltip 定位 */
    width: 44px;
    /* 稍微调小一点，显得更精致 (50 -> 44) */
    height: 44px;
    display: block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 弹性放大 */
}

.social-link-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 确保图标不变形 */
    display: block;
}

.social-link-item:hover {
    transform: scale(1.15);
    /* 悬停放大 */
}

/* Tooltip (悬停提示框) */
/* Tooltip (悬停提示框) - Redesigned & Tightened */
.social-link-item::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    /* 改为使用 top 定位，更直观控制间距 */
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    /* 初始位置稍低 */

    background-color: #FFF0F5;
    /* 浅粉色背景 (LavenderBlush) */
    color: #777777;
    /* 灰色文字 */
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 8px;
    /* 减小内边距，使其更紧凑 */
    border-radius: 0;
    /* 直角矩形 */
    border: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Tooltip 小三角 (移除，保持纯矩形) */
.social-link-item::before {
    content: none;
    display: none;
}

/* 悬停显示 */
.social-link-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
    /* 悬停时上浮，距离图标 4px 缝隙 */
}

/* 移动端调整 */
@media (max-width: 768px) {
    .social-links-home {
        gap: 25px;
        margin-top: 30px;
    }

    .social-link-item {
        width: 36px;
        height: 36px;
    }
}

/* =========================================
   主页互动标题样式 (Interactive Title)
   ========================================= */
.interactive-title {
    cursor: pointer;
    /* 暗示可点击 */
    user-select: none;
    /* 防止快速点击时选中文字 */
    transition: none !important;
    /* 禁用任何过渡动画 */
}

/* 确保悬浮时无视觉变化 (Visual consistency on hover) */
.interactive-title:hover {
    color: inherit;
    transform: none;
    opacity: 1;
    text-shadow: none;
}

/* =========================================
   Carousel Caption Styles
   ========================================= */
.carousel-caption {
    text-align: center;
    margin-top: 20px;
    transition: opacity 0.3s ease;
}

.caption-name {
    color: #FF6B9D;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.caption-price {
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-label {
    color: #888;
    margin-right: 8px;
    font-size: 16px;
}

.price-val {
    color: #FF6B9D;
    font-size: 24px;
    font-weight: bold;
}

.price-unit {
    color: #888;
    font-size: 12px;
    margin-left: 5px;
    font-weight: bold;
}

.caption-hint {
    color: #ccc;
    font-size: 12px;
    margin-top: 5px;
}

/* =========================================
   Commission Page Styles (委托页面样式)
   ========================================= */

/* Commission Specific Variables */
.comm-container {
    --comm-pink-title: #ff85a1;
    /* 标题粉色 */
    --comm-pink-bg: #fff0f5;
    /* 浅粉色背景 */
    --comm-text-main: #555555;
    /* 正文深灰 */
    --comm-highlight: #ff6b8b;
    /* 高亮强调色 */

    max-width: 900px;
    margin: -30px auto 0;
    /* 向上移动，减少与 banner 的距离 */
    padding: 20px 40px;
    background-color: #f7f7f7;
    /* 修改为 247, 247, 247 */
    border-radius: 8px;
    /* 增加圆角使其更自然 */
}

/* 顶部大标题容器 */
.comm-header-wrapper {
    display: flex;
    justify-content: center;
    /* 标题居中 */
    margin-bottom: 30px;
    /* 稍微减小下边距 */
    margin-top: 0;
    /* 移除上边距以提升位置 */
}

/* 顶部标题样式 (如：委托注意事项) */
.comm-header {
    background-color: var(--comm-pink-bg);
    color: var(--comm-pink-title);
    padding: 12px 40px;
    font-size: 24px;
    font-weight: bold !important;
    /* 强制加粗，覆盖全局 reset */
    letter-spacing: 2px;
    box-shadow: 0 2px 0 rgba(255, 180, 210, 0.3);
    /* 轻微的立体感 */
}

/* 内容板块 */
.comm-section {
    margin-bottom: 35px;
    text-align: left;
    /* 正文左对齐 */
}

/* 板块标题 (如：禁止事项) */
.comm-title {
    color: var(--comm-pink-title);
    font-size: 20px;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 2px solid transparent;
    /* 预留 */
}

/* 列表样式 */
.comm-list {
    list-style: none;
    /* 移除默认圆点 */
    padding-left: 10px;
}

.comm-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
    color: var(--comm-text-main);
    font-size: 14px;
    line-height: 1.8;
}

/* 自定义列表点 (使用小点) */
.comm-list li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--comm-text-main);
    font-weight: bold;
}

/* 高亮文本 */
.comm-highlight {
    color: var(--comm-highlight);
    background-color: rgba(255, 240, 245, 0.5);
    /* 极淡的背景增加可读性 */
    padding: 0 2px;
    border-radius: 2px;
}

/*
   折叠功能样式
   Toggle Button & Hidden Content
*/
.comm-toggle-btn {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--comm-highlight);
    /* 粉色倒三角 */
    border-bottom: none;
    background: none;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.3s ease;
    /* 旋转动画 */
    padding: 0;
}

.comm-toggle-btn.active {
    transform: rotate(180deg);
    /* 翻转朝上 */
}

.comm-hidden-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease;
    padding-left: 0;
    margin-top: 5px;
    color: #666;
}

.comm-hidden-content.active {
    max-height: 500px;
    /* 足够展示内容的高度 */
    opacity: 1;
}

/* 底部跳转链接 */
/* 底部跳转链接 */
.comm-footer-link {
    display: block;
    text-align: center;
    margin-top: 40px;
    /* 移出容器后保持40px间距 */
    color: #ff85a1;
    text-decoration: underline;
    font-weight: bold;
    padding-bottom: 40px;
    /* 增加底部留白，避免贴底 */
    font-size: 16px;
    transition: opacity 0.3s;
}

/* =========================================
   委托申请页面 (Request Page) 样式
   ========================================= */

/* 顶部邮箱头部 */
/* 顶部邮箱头部 */
/* 顶部邮箱头部 */
.req-email-header {
    width: 100%;
    height: 140px;
    /* 增加高度以完全包裹 */
    background-image: url('assets/em.png');
    /* 引用花纹 */
    background-repeat: repeat;
    /* 允许平铺 */
    background-position: center;
    /* 居中 */
    background-size: auto 120px;
    /* 放大花纹比例 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: -20px;
    /* 视觉上移，与Commission页面对齐 */

}

/* 顶部邮箱链接样式优化 */
.req-email-text {
    font-family: 'Checkbook', 'Zpix', monospace;
    font-size: 24px;
    color: #ff6b8b;
    /* 原本的粉色 */
    text-shadow:
        1px 1px 0 #ffd1dc,
        -1px 1px 0 #ffd1dc,
        1px -1px 0 #ffd1dc,
        -1px -1px 0 #ffd1dc;
    /* 原本的描边/阴影 */
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    user-select: text;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: text-shadow 0.3s ease;
}

/* 伪元素描边层 (中间层) - 流动动画 */
.req-email-text::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: 2;
    /* 位于本体(z1)之上 */
    pointer-events: none;

    -webkit-text-stroke: 5px transparent;
    background: linear-gradient(90deg,
            #ff6b8b 0%,
            #ffcce0 25%,
            #ff85a1 50%,
            #ffcce0 75%,
            #ff6b8b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    opacity: 0;
    animation: textFlow 3s linear infinite;
    transition: opacity 0.8s ease-out;
}

/* 伪元素覆盖层 (顶层) - 确保文字清晰 */
.req-email-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: 3;
    /* 位于流动层(z2)之上 */
    pointer-events: none;
    color: #ff6b8b;
    /* 保持与本体一致的颜色 */
    text-shadow: none;
    /* 顶层无描边，只负责显示清晰文字 */

    opacity: 0;
    transition: opacity 0.1s ease-in;
}

/* 悬浮状态 */
.req-email-text:hover {
    /* 隐藏本体的静态描边 */
    text-shadow: none;
}

.req-email-text:hover::before {
    /* 显示流动层 */
    opacity: 1;
    transition: opacity 0.1s ease-in;
}

.req-email-text:hover::after {
    /* 显示顶层清晰文字 */
    opacity: 1;
}

/* 定义流动动画 */
@keyframes textFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* 灰色主容器 */
.req-container {
    background-color: #f7f7f7;
    padding: 40px;
    border-radius: 8px;
    position: relative;
    /* 用于定位左上角标签 */
    max-width: 800px;
    margin: 0 auto;
}

/* 左上角 “一般委托” 标签 */
.req-top-label {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 14px;
    color: #ff85a1;
    font-weight: bold;
    cursor: pointer;
    /* 变为手型指针 */
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
    user-select: none;
}

.req-top-label:hover {
    background-color: #fff0f5;
}

.req-top-label::after {
    content: " ▶";
    font-size: 10px;
    vertical-align: middle;
}

/* Tooltip 提示 */
/* Tooltip 提示 - Redesigned */
.req-tooltip {
    visibility: hidden;
    background-color: #FFF0F5;
    /* LavenderBlush */
    color: #777777;
    /* Gray text */
    text-align: center;
    border-radius: 0;
    /* Rectangular */
    padding: 4px 8px;
    /* Tight padding */
    position: absolute;
    z-index: 10;
    top: -36px;
    /* Slightly upwards (-30px -> -36px) */
    left: 0;
    font-size: 12px;
    font-weight: normal;
    /* Cancel bold */
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.req-tooltip::after {
    content: none;
    display: none;
}

.req-top-label:hover .req-tooltip {
    visibility: visible;
    opacity: 1;
}

/* 表单隐藏状态 */
.form-hidden {
    display: none;
}

/* 标题 "个人委托需求详情表单" */
.req-title {
    text-align: center;
    color: #ff85a1;
    font-size: 24px;
    margin-bottom: 40px;
    background-color: #fff0f5;
    /* 浅粉底色块 */
    display: inline-block;
    padding: 10px 30px;
    margin-left: 50%;
    transform: translateX(-50%);
    /* 确保块居中 */
}

/* 表单网格布局 */
/* 表单网格布局 */
.req-form-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    /* 左侧标签固定宽，右侧自适应 */
    gap: 15px;
    align-items: center;
    /* 默认垂直居中对齐 (针对单行文本框) */
    margin-bottom: 40px;
}

.req-label {
    text-align: right;
    /* 标签右对齐 */
    color: #555;
    font-weight: bold;
    font-size: 16px;
    /* 移除统一的 padding-top */
}

/* 针对多行文本域的标签，需顶部对齐 */
.req-label-top {
    align-self: start;
    padding-top: 10px;
    /* 对齐文本域的第一行文字 */
}

/* 所有的输入框和文本域 */
.req-input {
    width: 100%;
    background-color: #eeeeee;
    /* 灰色背景 */
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    border-radius: 2px;
    box-sizing: border-box;
    font-family: 'Zpix', sans-serif;
    line-height: 1.6;
    /* 修复字符底部被裁剪的问题 */
}

.req-input:focus {
    outline: 2px solid #ffccdd;
    background-color: #fff;
}

/* 多行文本域特定高度 */
.req-textarea {
    height: 120px;
    /* 稍微增高一点以容纳更多行的提示 */
    resize: vertical;
    line-height: 1.6;
    /* 关键修复：增加行间距 (默认通常是 1.2 或 normal) */
    padding-top: 12px;
    /* 增加顶部内边距 */
}

/* Placeholder 样式 (斜体，输入后消失由浏览器处理) */
.req-input::placeholder {
    color: #999;
    font-style: italic;
    opacity: 0.8;
}

/* 固定文本字段 (粉色) */
.req-text-pink {
    color: #ff85a1;
    font-size: 14px;
    padding: 10px 15px;
    /* 增加左右内边距以对齐输入框文字 (15px) */
    font-family: 'Zpix', sans-serif;
    align-self: center;
    /* 确保在 Grid 中垂直居中 */
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* 底部操作区容器 */
.req-footer {
    display: flex;
    justify-content: flex-end;
    /* 整体靠右 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 15px;
    /* 较窄的间距 */
    margin-top: 40px;
    /* 增加与表格的间距 */
    max-width: 800px;
    margin: 40px auto;
    /* 上下40px，居中 */
    padding: 0 40px;
    /* 保持与表格对齐 */
}





/* 底部返回链接容器 */
.req-back-wrapper {
    max-width: 800px;
    margin: 15px auto 40px;
    /* 上方保留15px呼吸距，下方留白 */
    text-align: left;
    padding: 0 0px;
    /* 与上方的 footer 保持一致的内边距，确保对齐 */
    box-sizing: border-box;
}

.back-link-bottom {
    font-family: 'Zpix', sans-serif;
    color: #FFB6C1;
    /* 浅粉色 - 与顶部返回键一致 */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    padding: 2px 5px;
}

.back-link-bottom:hover {
    color: #FF6B9D;
    /* 悬停颜色加深 */
    transform: translateX(-3px);
    /* 轻微向左移动 */
    text-shadow: 0 0 5px rgba(255, 107, 157, 0.2);
    /* 移除可能存在的下划线，保持与顶部一致 */
    text-decoration: none;
    opacity: 1;
}



/* 复制按钮 */
.req-copy-btn {
    background-color: #fff0f5;
    /* 浅粉背景 */
    color: #ff6b8b;
    font-size: 24px;
    font-weight: normal;
    /* 取消加粗 */
    border: none;
    padding: 15px 40px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Zpix', sans-serif;
    box-shadow: 2px 2px 0 rgba(255, 180, 210, 0.5);
}

.req-copy-btn:hover {
    background-color: #ffe4e9;
    transform: translateY(-2px);
    box-shadow: 2px 4px 5px rgba(255, 180, 210, 0.3);
}

/* 按钮和消息的垂直列 */
.req-action-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* 关键：为绝对定位消息提供锚点 */
}

/* 消息提示 (绝对定位居中上方) */
.req-message {
    position: absolute;
    /* 核心修复：脱离文档流，防止挤压按钮位置 */
    bottom: 100%;
    /* 位于按钮容器最上方 */
    left: 50%;
    transform: translateX(-50%);
    /* 水平居中 */

    color: #ff85a1;
    font-size: 14px;
    margin-bottom: 10px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: 'Zpix', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    /* 防止遮挡 */
}

.req-message.show {
    opacity: 1;
}

/* =========================================
   请求页移动端优化 (Request Page Mobile Optimization)
   ========================================= */
@media (max-width: 768px) {

    /* 1. 容器减负 */
    .req-container {
        padding: 20px 15px;
        /* 减少内边距 */
    }

    /* 2. 标题优化：解除居中Hack，允许自然换行 */
    .req-title {
        display: block;
        /* 块级显示 */
        width: auto;
        /* 自动宽度 */
        margin: 50px auto 30px;
        /* 增加上方间距(50px)以避开绝对定位的按钮 */
        transform: none;
        /* 移除位移 */
        white-space: normal;
        /* 允许换行 */
        line-height: 1.4;
        /* 增加行高 */
        word-break: break-word;
        /* 允许在单词内换行 */
        font-size: 20px;
        /* 稍微调小字号 */
        padding: 10px 15px;
        /* 减少内边距 */
    }

    /* 3. 表单网格转为垂直堆叠 */
    .req-form-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        /* 增加垂直间距 */
        align-items: stretch;
        /* 关键：拉伸项目，确保子元素占满宽度，而不是居中 */
    }

    /* 4. 标签改为左对齐 */
    .req-label {
        text-align: left;
        /* 强制左对齐 */
        margin-bottom: -5px;
        /* 紧贴下方输入框 */
        font-size: 14px;
        width: 100%;
        /* 标签全宽 */
        padding-top: 0;
    }

    .req-label-top {
        padding-top: 0;
    }

    /* 5. 输入框全宽 */
    .req-input,
    .req-textarea {
        width: 100% !important;
        /* 强制全宽 */
        font-size: 14px;
    }

    /* 6. 底部区域适配 */
    .req-footer {
        flex-direction: column;
        align-items: stretch;
        /* 关键：改为 stretch 以确保子元素占满宽度 */
        gap: 20px;
        padding: 0;
        margin-top: 20px;
    }

    .req-action-col {
        width: 100%;
        /* 确保按钮容器全宽 */
    }

    .req-copy-btn {
        width: 100%;
        /* 按钮全宽 */
        white-space: nowrap;
        /* 防止按钮文字换行 */
    }



    /* 7. 顶部切换按钮优化 (防止遮挡标题) */
    .req-top-label {
        position: absolute;
        /* 回归绝对定位，不占用文档流高度 */
        top: 20px;
        /* 与 desktop 保持一致或微调 */
        left: 15px;
        /* 对齐移动端内边距 */
        margin: 0;
        /* 清除 margin */
        width: auto;
        /* 自动宽度 */
        display: inline-block;
        transform: none;
    }

    /* 8. 播放器居中优化 (Narrow Screen Player Centering) */
    .sidebar-player {
        display: flex;
        /* 启用 Flex 布局 */
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
        width: 100%;
        /* 占满容器宽 */
        margin: 0 auto;
        /* 自身居中 */
    }

    .custom-desktop-player {
        margin: 0 auto;
        /* 确保内部胶囊也居中 */
    }
}