/* ==========================================================================
   HonorCraft 荣誉工坊 - 核心样式系统 (Rich Aesthetics & Premium Design)
   ========================================================================== */

/* 1. 基础全局配置与设计系统变量 */
:root {
    --bg-dark: #080a16;
    --bg-card: rgba(255, 255, 255, 0.04);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-active: rgba(255, 255, 255, 0.18);
    --color-text-main: #f3f4f6;
    --color-text-desc: #9ca3af;
    --color-accent: #6366f1;
    --color-accent-glow: rgba(99, 102, 241, 0.4);
    --color-accent-secondary: #ec4899;
    --font-ui: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--color-text-main);
    font-family: var(--font-ui);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 隐藏横向滚动条，滚动条美化 */
.scrollbar-custom::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-custom::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-custom::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* 2. 背景流光霓虹气泡 (Neon Blurry Blobs) */
.blob-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.35;
    pointer-events: none;
    animation: blob-float 20s infinite alternate ease-in-out;
}
.blob-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    left: -100px;
    top: -100px;
}
.blob-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--color-accent-secondary) 0%, transparent 70%);
    right: -100px;
    bottom: -100px;
    animation-delay: -5s;
}

@keyframes blob-float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(80px, 50px) scale(1.1); }
    100% { transform: translate(-40px, -60px) scale(0.95); }
}

/* 3. 布局与头部 */
.app-container {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 主工作区网格 */
.workspace-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    flex-grow: 1;
}

/* 4. 左侧控制面板样式 (玻璃拟态) */
.control-panel {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    padding: 25px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: fadeInLeft 0.8s ease;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.panel-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 22px;
}
.panel-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}
.section-title .icon {
    font-size: 1.2rem;
}

.section-desc {
    color: var(--color-text-desc);
    font-size: 0.8rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* 徽章 */
.badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 300;
    margin-left: 6px;
}
.badge-accent {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

/* 网格背景库 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery-item {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.gallery-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}
.gallery-item.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent-glow);
}

.thumb-preview {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.thumb-traditional {
    background: radial-gradient(circle, #ffe082, #ff8f00, #d84315);
    box-shadow: inset 0 0 0 4px #e53935;
}
.thumb-traditional::after {
    content: "经典";
    color: #fff;
    font-size: 8px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
}

.thumb-vintage {
    background: linear-gradient(to right, #ff3d00 0%, #ff9100 20%, #ffff8d 50%, #ff9100 80%, #ff3d00 100%);
    box-shadow: inset 0 0 0 4px #e53935, 0 0 5px rgba(255, 235, 59, 0.3);
}
.thumb-vintage::after {
    content: "红黄";
    color: #ffeb3b;
    -webkit-text-stroke: 0.5px #e53935;
    font-size: 8px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
}

.thumb-golden {
    background: #faf9f6;
    box-shadow: inset 0 0 0 3px #d4af37;
}
.thumb-golden::after {
    content: "CERTIFICATE";
    color: #b3922e;
    font-size: 5px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
}

.thumb-cyber {
    background: #060713;
    box-shadow: inset 0 0 0 2px #00f2fe;
}
.thumb-cyber::after {
    content: "⚡ CYBER";
    color: #ec4899;
    font-size: 6px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
}

.thumb-cute {
    background: linear-gradient(135deg, #fff3e0, #ffcc80);
    box-shadow: inset 0 0 0 3px #fff;
}
.thumb-cute::after {
    content: "🎈 CUTE";
    color: #ff6b6b;
    font-size: 6px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
}

.plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    color: var(--color-text-desc);
    font-size: 1.5rem;
    font-weight: 300;
}

.thumb-name {
    font-size: 0.75rem;
    color: var(--color-text-desc);
}
.gallery-item.active .thumb-name {
    color: #a5b4fc;
    font-weight: 500;
}

/* 自定义背景删除按钮 */
.delete-bg-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
    transition: var(--transition-smooth);
}
.delete-bg-btn:hover {
    transform: scale(1.2);
    background: #dc2626;
}

/* 文字预设模板药丸按钮 */
.template-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-desc);
    padding: 6px 14px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition-smooth);
}
.pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.pill-btn.active {
    background: linear-gradient(135deg, var(--color-accent) 0%, #4f46e5 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

/* 输入表单 */
.editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.input-group label {
    font-size: 0.78rem;
    color: var(--color-text-desc);
    font-weight: 500;
}
.input-group input,
.input-group textarea {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}
.input-group input:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
}

/* 精细样式微调面板 */
.selected-layer-indicator {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 30px;
    margin-left: auto;
    font-weight: 400;
}

.style-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--transition-smooth);
}
.style-controls.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.control-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.control-row label {
    font-size: 0.78rem;
    color: var(--color-text-desc);
    display: flex;
    justify-content: space-between;
}

.control-row select {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
}

/* 滑块微美化 */
.range-container {
    display: flex;
    align-items: center;
    width: 100%;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: pointer;
    transition: var(--transition-smooth);
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #818cf8;
}

/* 颜色选择器包装 */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
}
.color-val {
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--color-text-desc);
}

/* 对齐按钮组 */
.align-btn-group {
    display: flex;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}
.align-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-desc);
    padding: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition-smooth);
}
.align-btn:hover {
    background: rgba(255,255,255,0.05);
}
.align-btn.active {
    background: var(--color-accent);
    color: #fff;
}

/* 印章工坊 */
.seal-workshop {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0,0,0,0.15);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.03);
}

.seal-source-selector {
    display: flex;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}
.seal-source-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-desc);
    padding: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition-smooth);
}
.seal-source-btn.active {
    background: var(--color-accent);
    color: #fff;
}

.seal-action-row {
    display: flex;
    gap: 8px;
}

.action-btn-sm {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.action-btn-sm:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
.action-btn-sm.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}
.action-btn-sm.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fff;
}

/* 底部操作大按钮 */
.panel-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.action-btn {
    flex: 1;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.outline-btn {
    background: transparent;
    border: 1px solid var(--border-glass-active);
    color: #fff;
}
.outline-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: #fff;
}

.primary-btn {
    background: linear-gradient(135deg, var(--color-accent) 0%, #4338ca 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}
.primary-btn:hover {
    background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* ==========================================================================
   5. 右侧：奖状高保真可视化沙盒预览区 (A4 比例 1.414 : 1)
   ========================================================================== */
.preview-viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
    border: 1px dashed rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    animation: fadeInRight 0.8s ease;
}

.tips-banner {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 0.8rem;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 25px;
    max-width: 95%;
    width: 900px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.guide-text {
    flex: 1;
}

/* 胶囊双态模式切换按钮组 */
.mode-toggle-group {
    display: flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    overflow: hidden;
    padding: 2px;
    flex-shrink: 0;
}

.mode-toggle-btn {
    background: transparent;
    border: none;
    color: var(--color-text-desc);
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 30px;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 5px;
}

.mode-toggle-btn:hover {
    color: #fff;
}

.mode-toggle-btn.active {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

/* ==========================================================================
   预览模式状态控制 (一键隐藏全部编辑轨迹，激活3D奢华观赏)
   ========================================================================== */
.certificate-canvas.preview-mode-active .draggable-layer {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important; /* 彻底禁用预览状态下的任何点击/拖拽交互，防止误触 */
}

.certificate-canvas.preview-mode-active .drag-handle-hint,
.certificate-canvas.preview-mode-active .resize-handle {
    display: none !important; /* 彻底隐藏全部辅助耳朵和缩放拉伸圆点 */
}

/* ==========================================================================
   极简聚焦属性面板 (只在选中相应元素时，平滑淡入滑出)
   ========================================================================== */
.dynamic-section {
    display: none; /* 默认彻底隐藏 */
    animation: slideFadeIn 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3D 悬浮物理容器 */
.canvas-wrapper-3d {
    perspective: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* A4 画布核心逻辑尺寸：固定 1000px * 707px，等比缩放 */
.certificate-canvas {
    width: 1000px;
    height: 707px;
    min-width: 1000px;
    min-height: 707px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border-radius: 2px; /* A4 纸边缘稍平直 */
    transition: transform 0.1s ease-out; /* 用于3D跟随，响应迅速 */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* 即使使用 html2canvas 也能完全兼容的跨域/本地背景图图层 */
.canvas-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* 纯矢量背景装饰层 */
.vector-decorations-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* --- 6.1 【经典传承】传统中国奖状 (还原为经典极简版) --- */
.certificate-canvas.bg-template-traditional {
    background: linear-gradient(to right, 
        #ff5252 0%, 
        #ffe082 35%, 
        #ffe082 65%, 
        #ff5252 100%);
    border: 20px solid #e53935; /* 经典大红框 */
    outline: 3px double #fbbd08; /* 金色双细线内框 */
    outline-offset: -10px;
}

/* 传统经典老奖状麦穗下方的圆点底衬装饰 */
.certificate-canvas.bg-template-traditional::before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 12px;
    background-image: radial-gradient(circle, #e53935 4px, transparent 5px);
    background-size: 24px 24px;
    opacity: 0.15;
    z-index: 2;
    pointer-events: none;
}

/* --- 6.1-B 【老式红黄】1:1像素级极致复刻老式红黄大奖状 --- */
.certificate-canvas.bg-template-vintage {
    /* 标志性的三段式红黄高饱和度线性渐变，完美还原图片二 */
    background: linear-gradient(to right, 
        #ff3d00 0%, 
        #ff9100 16%, 
        #ffff8d 42%, 
        #ffff8d 58%, 
        #ff9100 84%, 
        #ff3d00 100%);
    border: 24px solid #e53935; /* 经典的红色超宽外框 */
    outline: 4px solid #fdd835; /* 外框金色描边 */
    outline-offset: -14px;
}

/* 左右两侧的白色极细双竖线装饰，完美还原图片一与二 */
.certificate-canvas.bg-template-vintage::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 45px;
    width: 6px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.7);
    border-right: 1.5px solid rgba(255, 255, 255, 0.7);
    z-index: 2;
    pointer-events: none;
}
.certificate-canvas.bg-template-vintage::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: 45px;
    width: 6px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.7);
    border-right: 1.5px solid rgba(255, 255, 255, 0.7);
    z-index: 2;
    pointer-events: none;
}

.decor-traditional-elements,
.decor-vintage-elements,
.decor-vintage-blue-elements,
.decor-vintage-glow-elements,
.decor-certificate-classic-elements,
.decor-vintage-wedding-elements,
.decor-vintage-gilt-elements {
    display: none; /* 仅在 active 时显示 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.bg-template-traditional .decor-traditional-elements {
    display: block;
}
.bg-template-vintage .decor-vintage-elements {
    display: block;
}
.bg-template-vintage-blue .decor-vintage-blue-elements {
    display: block;
}
.bg-template-vintage-glow .decor-vintage-glow-elements {
    display: block;
}
.bg-template-certificate-classic .decor-certificate-classic-elements {
    display: block;
}
.bg-template-vintage-wedding .decor-vintage-wedding-elements {
    display: block;
}
.bg-template-vintage-gilt .decor-vintage-gilt-elements {
    display: block;
}

/* 顶部左右两端的空心红边 3D 艺术字“奖”、“状” */
.traditional-word {
    position: absolute;
    top: 15px;
    font-size: 78px;
    font-family: 'Noto Serif SC', serif;
    font-weight: 900;
    color: #ffffff;
    -webkit-text-stroke: 3px #e53935;
    line-height: 1;
    z-index: 5;
    text-shadow: 
        2.5px 2.5px 0px #fdd835, 
        -1px -1px 0px #fdd835,
        1px -1px 0px #fdd835,
        -1px 1px 0px #fdd835,
        4px 4px 8px rgba(0, 0, 0, 0.25);
}
.traditional-word.tl { left: 16%; }
.traditional-word.tr { right: 16%; }

.traditional-top-emblem-wrapper {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 120px;
    z-index: 3;
}
.traditional-emblem-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.traditional-bottom-emblem-wrapper {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 100px;
    z-index: 3;
}
.traditional-bottom-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.15));
}

.corner-peony {
    position: absolute;
    bottom: -5px;
    width: 130px;
    height: 130px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.95;
    z-index: 3;
}
.corner-peony.left {
    left: -5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 10 90 C 20 60 50 60 50 90 Z M 25 70 C 40 50 65 65 55 85' fill='%232e7d32' stroke='%23fdd835' stroke-width='1.2'/%3E%3Cpath d='M 5 65 C 20 40 45 45 40 75 Z' fill='%231b5e20' stroke='%23fdd835' stroke-width='1'/%3E%3Ccircle cx='30' cy='75' r='18' fill='%23d32f2f' stroke='%23fdd835' stroke-width='1.5'/%3E%3Ccircle cx='23' cy='70' r='12' fill='%23e53935'/%3E%3Ccircle cx='35' cy='80' r='13' fill='%23b71c1c'/%3E%3Ccircle cx='30' cy='75' r='7' fill='%23ffeb3b'/%3E%3C/svg%3E");
}
.corner-peony.right {
    right: -5px;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 10 90 C 20 60 50 60 50 90 Z M 25 70 C 40 50 65 65 55 85' fill='%232e7d32' stroke='%23fdd835' stroke-width='1.2'/%3E%3Cpath d='M 5 65 C 20 40 45 45 40 75 Z' fill='%231b5e20' stroke='%23fdd835' stroke-width='1'/%3E%3Ccircle cx='30' cy='75' r='18' fill='%23d32f2f' stroke='%23fdd835' stroke-width='1.5'/%3E%3Ccircle cx='23' cy='70' r='12' fill='%23e53935'/%3E%3Ccircle cx='35' cy='80' r='13' fill='%23b71c1c'/%3E%3Ccircle cx='30' cy='75' r='7' fill='%23ffeb3b'/%3E%3C/svg%3E");
}

/* --- 6.2 【尊贵金典】现代荣誉证书 --- */
.certificate-canvas.bg-template-golden {
    background-color: #faf9f6; /* 奢华的象牙白 */
    background-image: radial-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
    border: 30px solid #faf9f6;
}

.decor-golden-elements {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg-template-golden .decor-golden-elements {
    display: block;
}

.gold-inner-border {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 3px double #d4af37; /* 金色双重线框 */
}

/* 欧式金花边角 */
.gold-corner {
    position: absolute;
    width: 45px;
    height: 45px;
    border: 4px solid transparent;
    z-index: 3;
}
.corner-tl {
    top: 25px;
    left: 25px;
    border-top-color: #d4af37;
    border-left-color: #d4af37;
}
.corner-tl::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #d4af37;
    border-left: 1px solid #d4af37;
}
.corner-tr {
    top: 25px;
    right: 25px;
    border-top-color: #d4af37;
    border-right-color: #d4af37;
}
.corner-tr::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #d4af37;
    border-right: 1px solid #d4af37;
}
.corner-bl {
    bottom: 25px;
    left: 25px;
    border-bottom-color: #d4af37;
    border-left-color: #d4af37;
}
.corner-bl::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #d4af37;
    border-left: 1px solid #d4af37;
}
.corner-br {
    bottom: 25px;
    right: 25px;
    border-bottom-color: #d4af37;
    border-right-color: #d4af37;
}
.corner-br::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #d4af37;
    border-right: 1px solid #d4af37;
}

/* 顶部证书英文字样装饰 */
.certificate-canvas.bg-template-golden::after {
    content: "CERTIFICATE OF HONOR";
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 700;
    color: #b3922e;
    letter-spacing: 6px;
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    opacity: 0.85;
}

/* --- 6.3 【赛博霓虹】极客发光奖状 --- */
.certificate-canvas.bg-template-cyber {
    background-color: #060713;
    border: 20px solid #060713;
}

.decor-cyber-elements {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg-template-cyber .decor-cyber-elements {
    display: block;
}

/* 赛博网格图层 */
.cyber-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 242, 254, 0.03) 1px, transparent 0),
        linear-gradient(90deg, rgba(0, 242, 254, 0.03) 1px, transparent 0);
    background-size: 20px 20px;
}

/* 蓝紫霓虹呼吸条 */
.neon-line {
    position: absolute;
    background: linear-gradient(90deg, #00f2fe, #4facfe, #ec4899);
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.7));
    animation: neon-breath 3s infinite alternate ease-in-out;
}
.border-t { top: 0; left: 0; width: 100%; height: 3px; }
.border-b { bottom: 0; left: 0; width: 100%; height: 3px; }
.border-l { top: 0; left: 0; width: 3px; height: 100%; }
.border-r { top: 0; right: 0; width: 3px; height: 100%; }

@keyframes neon-breath {
    0% { opacity: 0.7; filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.5)); }
    100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.9)) drop-shadow(0 0 4px rgba(236, 72, 153, 0.6)); }
}

/* 顶部赛博科技微标题装饰 */
.certificate-canvas.bg-template-cyber::after {
    content: "// PROTOCOL : ACHIEVEMENT_UNLOCKED //";
    font-family: monospace;
    font-size: 13px;
    color: #ec4899;
    letter-spacing: 3px;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
}

/* --- 6.4 【软萌卡通】手绘萌宠奖状 --- */
.certificate-canvas.bg-template-cute {
    background: linear-gradient(135deg, #fff9db 0%, #fff3bf 50%, #ffe066 100%);
    border: 15px solid #fff;
    box-shadow: 
        inset 0 0 0 3px #ffe066,
        0 20px 40px rgba(0, 0, 0, 0.2);
}

.decor-cute-elements {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg-template-cute .decor-cute-elements {
    display: block;
}

/* 顶部可爱波浪微边饰 */
.certificate-canvas.bg-template-cute::before {
    content: "🌸 🏆 CONGRATULATIONS 🏆 🌸";
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #ff8787;
    letter-spacing: 5px;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* 当应用自定义上传背景图时，隐藏全部内置的装饰层 */
.certificate-canvas.custom-bg-active .vector-decorations-wrapper {
    display: none !important;
}
.certificate-canvas.custom-bg-active::after, 
.certificate-canvas.custom-bg-active::before {
    display: none !important;
}
.certificate-canvas.custom-bg-active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}


/* ==========================================================================
   7. 文字与印章图层样式及交互 (WYSIWYG Layer Interaction)
   ========================================================================== */

.canvas-text-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; /* 自身不可穿透，子项激活交互 */
}

/* 通用可拖动图层定义 */
.draggable-layer {
    position: absolute;
    pointer-events: auto; /* 让子元素允许交互 */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    will-change: left, top;
}

.draggable-layer:active {
    cursor: grabbing;
}

/* 文本图层特定样式 */
.text-layer {
    padding: 6px 12px;
    border: 1px dashed transparent;
    border-radius: 4px;
    width: fit-content;    /* 核心修复：宽度紧密收缩包裹文字，防左右多余透明区域遮挡其他元素 */
}

/* 核心优化：只在纯文字 span 上应用 pre-wrap，完美避开 HTML 源码内部换行与缩进引发的巨大透明空白 Bug！ */
.text-content {
    white-space: pre-wrap; /* 保留用户输入的空格与回车，但完全忽略 HTML 代码格式 */
}

.text-layer:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.03);
}

.text-layer.active {
    border-color: var(--color-accent) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 0 0 1px var(--color-accent);
}

/* 各种图层默认文字的特定渲染（不同模板的字型差异） */
/* 1. 中式传统及复古老式奖状系列通用文字样式 (traditional, vintage, vintage-blue, vintage-glow, certificate-classic, vintage-wedding, vintage-gilt) */
.bg-template-traditional #layer-name,
.bg-template-vintage #layer-name,
.bg-template-vintage-blue #layer-name,
.bg-template-vintage-glow #layer-name,
.bg-template-certificate-classic #layer-name,
.bg-template-vintage-wedding #layer-name,
.bg-template-vintage-gilt #layer-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 32px;
    color: #1a1a1a;
    font-weight: 700;
}
.bg-template-traditional #layer-title,
.bg-template-vintage #layer-title,
.bg-template-vintage-blue #layer-title,
.bg-template-vintage-glow #layer-title,
.bg-template-certificate-classic #layer-title,
.bg-template-vintage-wedding #layer-title,
.bg-template-vintage-gilt #layer-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 52px;
    color: #e53935;
    font-weight: 900;
}
.bg-template-traditional #layer-content,
.bg-template-vintage #layer-content,
.bg-template-vintage-blue #layer-content,
.bg-template-vintage-glow #layer-content,
.bg-template-certificate-classic #layer-content,
.bg-template-vintage-wedding #layer-content,
.bg-template-vintage-gilt #layer-content {
    font-family: 'Noto Serif SC', serif;
    font-size: 25px;
    color: #262626;
    text-indent: 2em; /* 经典的行首缩进 */
}
.bg-template-traditional #layer-org,
.bg-template-traditional #layer-date,
.bg-template-vintage #layer-org,
.bg-template-vintage #layer-date,
.bg-template-vintage-blue #layer-org,
.bg-template-vintage-blue #layer-date,
.bg-template-vintage-glow #layer-org,
.bg-template-vintage-glow #layer-date,
.bg-template-certificate-classic #layer-org,
.bg-template-certificate-classic #layer-date,
.bg-template-vintage-wedding #layer-org,
.bg-template-vintage-wedding #layer-date,
.bg-template-vintage-gilt #layer-org,
.bg-template-vintage-gilt #layer-date {
    font-family: 'Noto Serif SC', serif;
    font-size: 22px;
    color: #262626;
}

/* 2. 现代金质 */
.bg-template-golden #layer-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 28px;
    color: #1a1a1a;
    width: 76%;
    left: 12% !important;
    text-align: center;
}
.bg-template-golden #layer-title {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 40px;
    color: #b3922e;
    font-weight: 700;
    width: 76%;
    left: 12% !important;
    text-align: center;
}
.bg-template-golden #layer-content {
    font-family: 'Noto Serif SC', serif;
    font-size: 20px;
    color: #4a4a4a;
    width: 76%;
    left: 12% !important;
    text-align: center;
    line-height: 2;
}
.bg-template-golden #layer-org,
.bg-template-golden #layer-date {
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    color: #4a4a4a;
}

/* 3. 赛博极客 */
.bg-template-cyber #layer-name {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 28px;
    color: #00f2fe;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
}
.bg-template-cyber #layer-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 46px;
    color: #ec4899;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}
.bg-template-cyber #layer-content {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 20px;
    color: #cbd5e1;
    line-height: 1.8;
}
.bg-template-cyber #layer-org,
.bg-template-cyber #layer-date {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 18px;
    color: #00f2fe;
    text-shadow: 0 0 5px rgba(0, 242, 254, 0.3);
}

/* 4. 软萌可爱 */
.bg-template-cute #layer-name {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 30px;
    color: #ff6b6b;
    font-weight: 700;
}
.bg-template-cute #layer-title {
    font-family: 'ZCOOL XiaoWei', serif;
    font-size: 48px;
    color: #ff922b;
    font-weight: 700;
}
.bg-template-cute #layer-content {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 22px;
    color: #495057;
    line-height: 1.8;
}
.bg-template-cute #layer-org,
.bg-template-cute #layer-date {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 20px;
    color: #ff6b6b;
}

/* 对齐辅助 */
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}

/* 拖拽微指示器 */
.drag-handle-hint {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.drag-handle-hint::after {
    content: "···";
    color: #fff;
    font-size: 12px;
    line-height: 1px;
}
.draggable-layer:hover .drag-handle-hint {
    display: flex;
}

/* 印章图层 */
.seal-layer {
    z-index: 6;
    padding: 5px;
    border: 1px dashed transparent;
    cursor: grab;
}
.seal-layer:hover {
    border-color: rgba(229, 57, 53, 0.4);
    background: rgba(229, 57, 53, 0.03);
}
.seal-layer.active {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 0 1px #ef4444;
}

.seal-container {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* 内部图片不需要事件 */
    transition: transform 0.1s ease-out;
}
.seal-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   8. 动画与响应式媒体查询
   ========================================================================== */

.site-footer {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    margin-top: 30px;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 大屏幕响应式 - 工作区自适应 */
@media (max-width: 1400px) {
    .app-container {
        padding: 15px 10px;
    }
    .workspace-grid {
        grid-template-columns: 390px 1fr;
        gap: 20px;
    }
}

/* 关键响应式突破点：将左右布局切换为上下布局 */
@media (max-width: 1000px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
    .control-panel {
        max-height: none;
    }
    .preview-viewport {
        padding: 40px 10px;
        min-height: auto;
    }
}

/* ==========================================================================
   文字与印章的可视化拉伸尺寸手柄 (Photoshop/Figma 级别交互)
   ========================================================================== */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--color-accent);
    border: 1px solid #fff;
    border-radius: 50%;
    right: -5px;
    bottom: -5px;
    cursor: se-resize; /* 右下角对角线拉伸手势 */
    display: none;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.draggable-layer.active .resize-handle {
    display: block; /* 仅在激活激活时显示拉伸点 */
}

.resize-handle:hover {
    transform: scale(1.3);
    background-color: var(--color-accent-secondary);
}

/* ==========================================================================
   7. 高保真悬浮智能工坊 (Floating Smart Atelier) CSS 样式
   ========================================================================== */
.floating-atelier {
    position: absolute;
    z-index: 2000;
    width: 320px;
    background: rgba(12, 14, 28, 0.82);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* 初始隐藏，带有动感的过渡 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.96);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility 0.3s;
}

/* 激活展现态 */
.floating-atelier.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 拖拽/拉伸时的粘性半透明态 */
.floating-atelier.dragging-active {
    opacity: 0.32;
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 顶部流光发光条 */
.atelier-flow-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #f472b6);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 1px 8px rgba(99, 102, 241, 0.5);
}

/* 头部样式 */
.atelier-header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.atelier-header:active {
    cursor: grabbing;
}

.atelier-title-icon {
    font-size: 1.1rem;
    margin-right: 6px;
}

.atelier-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.5px;
}

.atelier-close-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--color-text-desc);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 2px 6px;
    border-radius: 4px;
}

.atelier-close-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* 身体内部紧凑排版 */
.atelier-body {
    padding: 14px;
    max-height: 480px;
    overflow-y: auto;
}

/* 滚动条美化 */
.atelier-body::-webkit-scrollbar {
    width: 4px;
}
.atelier-body::-webkit-scrollbar-track {
    background: transparent;
}
.atelier-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* 子面板 */
.atelier-sub-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 深度定制控制项在悬浮窗口中的排版 */
.floating-atelier .control-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.floating-atelier .control-row label {
    font-size: 0.72rem;
    color: var(--color-text-desc);
    display: flex;
    justify-content: space-between;
}

.floating-atelier .input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.floating-atelier .input-group label {
    font-size: 0.72rem;
    color: var(--color-text-desc);
}

.floating-atelier select,
.floating-atelier input[type="text"],
.floating-atelier textarea {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 10px;
    color: #fff;
    font-size: 0.8rem;
    width: 100%;
    outline: none;
    transition: var(--transition-smooth);
}

.floating-atelier select:focus,
.floating-atelier input[type="text"]:focus,
.floating-atelier textarea:focus {
    border-color: var(--color-accent);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
}

.floating-atelier select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 28px;
}

.floating-atelier textarea {
    resize: none;
    line-height: 1.4;
}

.floating-atelier .dynamic-input-field {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 10px;
    color: #fff;
    font-size: 0.8rem;
}

/* ==========================================================================
   8. Collapsible (可收起折叠属性页) 样式系统
   ========================================================================== */
.collapsible-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 18px;
    transition: var(--transition-smooth);
}
.collapsible-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
    -webkit-user-select: none;
}

.collapsible-header:hover .section-title {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.collapsible-header:hover .collapsible-arrow {
    color: var(--color-accent);
    text-shadow: 0 0 8px var(--color-accent-glow);
}

.collapsible-arrow {
    font-size: 0.75rem;
    color: var(--color-text-desc);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
}

/* 折叠高度内容容器 */
.collapsible-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 激活展开态 */
.collapsible-section.active .collapsible-content {
    max-height: 600px; /* 给予足够的容纳高度 */
    opacity: 1;
    overflow: visible; /* 允许溢出显示自定义上传等提示 */
    margin-top: 15px;
}

/* 箭头旋转状态 */
.collapsible-section.active .collapsible-arrow {
    transform: rotate(0deg);
}
.collapsible-section:not(.active) .collapsible-arrow {
    transform: rotate(-90deg);
}

/* 内容内部包裹器 */
.collapsible-content-inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 优雅次级辅助重置按钮 */
.reset-link-btn {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: var(--color-text-desc);
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: var(--transition-smooth);
}
.reset-link-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* ==========================================================================
   9. 极客流光超级导出按钮 (Premium Super Export Panel)
   ========================================================================== */
.super-export-wrapper {
    margin-top: auto; /* 置于控制面板底部 */
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.super-export-btn {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border: none;
    border-radius: 14px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.super-export-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.55),
                0 0 25px rgba(236, 72, 153, 0.3);
}

.super-export-btn:active {
    transform: translateY(-1px) scale(0.99);
}

/* 按钮内扫光动效 */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
    animation: button-shine-sweep 4.5s infinite ease-in-out;
}

@keyframes button-shine-sweep {
    0% { left: -100%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

.btn-main-text {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-sub-text {
    font-size: 0.68rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.5px;
}

/* ==========================================================================
   10. 新增三套高水准纯 CSS/SVG 矢量背景模板样式
   ========================================================================== */

/* --- 10.1 缩略图展现样式 --- */
/* --- 10.1 缩略图展现样式 --- */
.thumb-vintage-blue {
    background: radial-gradient(circle, #fffdf2 40%, #f6edd0 100%);
    box-shadow: inset 0 0 0 3px #e53935;
    position: relative;
}
.thumb-vintage-blue::after {
    content: "红蓝";
    color: #e53935;
    font-size: 8px;
    position: absolute;
    top: 30%; left: 50%; transform: translate(-50%, -50%);
    font-weight: 700;
}

.thumb-vintage-glow {
    background: radial-gradient(circle at 50% 60%, #fffde7 0%, #ff8f00 100%);
    box-shadow: inset 0 0 0 3px #e53935;
    position: relative;
}
.thumb-vintage-glow::after {
    content: "光芒";
    color: #ff9100;
    -webkit-text-stroke: 0.3px #e53935;
    font-size: 8px;
    position: absolute;
    top: 30%; left: 50%; transform: translate(-50%, -50%);
    font-weight: 700;
}

.thumb-certificate-classic {
    background: linear-gradient(135deg, #fdfbf7 0%, #f5ecd2 100%);
    box-shadow: inset 0 0 0 3px #e53935;
    position: relative;
}
.thumb-certificate-classic::after {
    content: "国徽";
    color: #e53935;
    font-size: 8px;
    position: absolute;
    top: 30%; left: 50%; transform: translate(-50%, -50%);
    font-weight: 700;
}

/* --- 10.2 【经典红蓝】70-80年代经典斜切条纹几何框奖状 --- */
.certificate-canvas.bg-template-vintage-blue {
    background: radial-gradient(circle, #fffdf2 40%, #f6edd0 100%);
    border: 22px solid #e53935; /* 最外层大红边框 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* 经典红蓝白相间的 12px 几何斜纹内框 (利用 border-image 和 repeating-linear-gradient) */
.certificate-canvas.bg-template-vintage-blue::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 12px solid transparent;
    border-image: repeating-linear-gradient(-45deg, #e53935, #e53935 8px, #ffffff 8px, #ffffff 16px, #1e88e5 16px, #1e88e5 24px, #ffffff 24px, #ffffff 32px) 12;
    z-index: 2;
    pointer-events: none;
}

/* 几何斜纹内部的精致大红单实内框线 */
.certificate-canvas.bg-template-vintage-blue::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    bottom: 22px;
    border: 2px solid #e53935;
    z-index: 2;
    pointer-events: none;
}

/* --- 10.3 【麦穗光芒】经典向阳放射大红花麦穗大奖状 --- */
.certificate-canvas.bg-template-vintage-glow {
    /* 经典 conic 放射底纹，太阳向四周发散红色放射扇形 (利用 conic-gradient 与 radial-gradient 复合绘制) */
    background: 
        repeating-conic-gradient(from 0deg at 50% 60%, rgba(229, 57, 53, 0.04) 0deg 8deg, transparent 8deg 16deg),
        radial-gradient(circle at 50% 60%, #fffde7 0%, #ffff8d 25%, #ff8f00 100%);
    border: 24px solid #e53935; /* 经典的超宽外框 */
    outline: 4px solid #fdd835; /* 外框金色描边 */
    outline-offset: -14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* 左右两侧的白色极细双竖线装饰 */
.certificate-canvas.bg-template-vintage-glow::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 45px;
    width: 6px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.6);
    border-right: 1.5px solid rgba(255, 255, 255, 0.6);
    z-index: 2;
    pointer-events: none;
}
.certificate-canvas.bg-template-vintage-glow::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: 45px;
    width: 6px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.6);
    border-right: 1.5px solid rgba(255, 255, 255, 0.6);
    z-index: 2;
    pointer-events: none;
}

/* --- 10.4 【庄重证书】庄严对称红旗国徽荣誉证书 --- */
.certificate-canvas.bg-template-certificate-classic {
    background: linear-gradient(135deg, #fdfbf7 0%, #f5ecd2 100%);
    border: 25px solid #e53935; /* 庄重红色装裱 */
    outline: 4px double #fdd835; /* 金色双实装裱内框线 */
    outline-offset: -15px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* 庄重证书细节：角落微小的麦穗圆点衬托 (::before) */
.certificate-canvas.bg-template-certificate-classic::before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 12px;
    background-image: radial-gradient(circle, #fdd835 3px, transparent 4px);
    background-size: 20px 20px;
    opacity: 0.25;
    z-index: 2;
    pointer-events: none;
}

/* --- 10.5 缩略图展现样式 (喜庆双喜与富贵金边) --- */
.thumb-vintage-wedding {
    background: radial-gradient(circle, #fffef9 40%, #fffae8 100%);
    box-shadow: inset 0 0 0 3px #e53935;
    position: relative;
}
.thumb-vintage-wedding::after {
    content: "囍喜";
    color: #e53935;
    font-size: 8px;
    position: absolute;
    top: 30%; left: 50%; transform: translate(-50%, -50%);
    font-weight: 700;
}

.thumb-vintage-gilt {
    background: linear-gradient(to right, #ff3d00 0%, #ffff8d 50%, #ff3d00 100%);
    box-shadow: inset 0 0 0 3px #e53935;
    position: relative;
}
.thumb-vintage-gilt::after {
    content: "富贵";
    color: #ffeb3b;
    -webkit-text-stroke: 0.3px #e53935;
    font-size: 8px;
    position: absolute;
    top: 30%; left: 50%; transform: translate(-50%, -50%);
    font-weight: 700;
}

/* --- 10.6 【喜庆双喜】传统结发双喜大喜报 --- */
.certificate-canvas.bg-template-vintage-wedding {
    background: radial-gradient(circle, #fffef9 40%, #fffae8 100%);
    border: 22px solid #e53935; /* 最外层大红边框 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* 经典中式回字形雷纹/如意祥云纹金色内衬框 (SVG 内联以确保导出 300% 极其锋利无锯齿) */
.certificate-canvas.bg-template-vintage-wedding::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 10px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0V0zm2 2v12h12V2H2zm2 2h8v8H4V4zm2 2v4h4V6H6z' fill='%23fdd835'/%3E%3C/svg%3E") 10 repeat;
    z-index: 2;
    pointer-events: none;
}

/* 回字雷纹内部的精致大红单实内框线 */
.certificate-canvas.bg-template-vintage-wedding::after {
    content: "";
    position: absolute;
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    border: 1.5px solid #e53935;
    z-index: 2;
    pointer-events: none;
}

/* --- 10.7 【富贵金边】富贵牡丹金边回字纹大奖状 --- */
.certificate-canvas.bg-template-vintage-gilt {
    /* 标志性的红黄大渐变底纹 */
    background: linear-gradient(to right, 
        #ff3d00 0%, 
        #ff9100 16%, 
        #ffff8d 42%, 
        #ffff8d 58%, 
        #ff9100 84%, 
        #ff3d00 100%);
    border: 24px solid #e53935; /* 最外层大红框 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* 金色万字雷纹框线 */
.certificate-canvas.bg-template-vintage-gilt::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 12px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0V0zm2 2v12h12V2H2zm2 2h8v8H4V4zm2 2v4h4V6H6z' fill='%23fdd835'/%3E%3C/svg%3E") 12 repeat;
    z-index: 2;
    pointer-events: none;
}

/* 雷纹内层的金色细实线框 */
.certificate-canvas.bg-template-vintage-gilt::after {
    content: "";
    position: absolute;
    top: 22px; left: 22px; right: 22px; bottom: 22px;
    border: 2px solid #fdd835;
    z-index: 2;
    pointer-events: none;
}

/* 四个角落极致饱满、纯内联 SVG 绿红金牡丹花卉定位，细节繁复奢华 */
.gilt-corner-peony {
    position: absolute;
    width: 140px;
    height: 140px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.95;
    z-index: 3;
}
.gilt-corner-peony.tl {
    top: -5px; left: -5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 0 0 Q 30 10 40 40 Q 10 30 0 0' fill='%232e7d32' stroke='%23fdd835' stroke-width='1.2'/%3E%3Cpath d='M 10 5 C 20 2 30 10 25 25 Q 15 20 10 5' fill='%231b5e20' stroke='%23fdd835' stroke-width='1'/%3E%3Ccircle cx='35' cy='35' r='18' fill='%23d32f2f' stroke='%23fdd835' stroke-width='1.5'/%3E%3Ccircle cx='27' cy='27' r='12' fill='%23e53935'/%3E%3Ccircle cx='35' cy='35' r='6' fill='%23ffeb3b'/%3E%3C/svg%3E");
}
.gilt-corner-peony.tr {
    top: -5px; right: -5px;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 0 0 Q 30 10 40 40 Q 10 30 0 0' fill='%232e7d32' stroke='%23fdd835' stroke-width='1.2'/%3E%3Cpath d='M 10 5 C 20 2 30 10 25 25 Q 15 20 10 5' fill='%231b5e20' stroke='%23fdd835' stroke-width='1'/%3E%3Ccircle cx='35' cy='35' r='18' fill='%23d32f2f' stroke='%23fdd835' stroke-width='1.5'/%3E%3Ccircle cx='27' cy='27' r='12' fill='%23e53935'/%3E%3Ccircle cx='35' cy='35' r='6' fill='%23ffeb3b'/%3E%3C/svg%3E");
}
.gilt-corner-peony.bl {
    bottom: -5px; left: -5px;
    transform: scaleY(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 0 0 Q 30 10 40 40 Q 10 30 0 0' fill='%232e7d32' stroke='%23fdd835' stroke-width='1.2'/%3E%3Cpath d='M 10 5 C 20 2 30 10 25 25 Q 15 20 10 5' fill='%231b5e20' stroke='%23fdd835' stroke-width='1'/%3E%3Ccircle cx='35' cy='35' r='18' fill='%23d32f2f' stroke='%23fdd835' stroke-width='1.5'/%3E%3Ccircle cx='27' cy='27' r='12' fill='%23e53935'/%3E%3Ccircle cx='35' cy='35' r='6' fill='%23ffeb3b'/%3E%3C/svg%3E");
}
.gilt-corner-peony.br {
    bottom: -5px; right: -5px;
    transform: scale(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 0 0 Q 30 10 40 40 Q 10 30 0 0' fill='%232e7d32' stroke='%23fdd835' stroke-width='1.2'/%3E%3Cpath d='M 10 5 C 20 2 30 10 25 25 Q 15 20 10 5' fill='%231b5e20' stroke='%23fdd835' stroke-width='1'/%3E%3Ccircle cx='35' cy='35' r='18' fill='%23d32f2f' stroke='%23fdd835' stroke-width='1.5'/%3E%3Ccircle cx='27' cy='27' r='12' fill='%23e53935'/%3E%3Ccircle cx='35' cy='35' r='6' fill='%23ffeb3b'/%3E%3C/svg%3E");
}