* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', sans-serif; }
        body { 
            background: #1a1a2e; 
            color: #fff; 
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            overflow: hidden;
        }

        /* 页头标题 */

/* 站点 Logo 样式 */
.site-logo {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* 修改页面标题样式以容纳 Logo */

        .page-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 12px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between; /* 保持这个 */
    align-items: center;
}

.important-tip-btn {
    background: linear-gradient(to right, #4ecca3, #38b592);
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-left: auto; /* 添加这一行，让按钮自动靠右 */
}

.page-title {
    display: flex;
    align-items: center;
    color: #ffd700;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
        
        /* 重要提示按钮 */
        .important-tip-btn {
            background: linear-gradient(to right, #4ecca3, #38b592);
            color: #000;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .important-tip-btn:hover {
            background: linear-gradient(to right, #38b592, #2a9d7f);
            transform: translateY(-1px);
        }

        /* 重要提示弹窗 */
        .tip-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 3000;
            overflow-y: auto;
        }
        
        .tip-modal-content {
            background: #16213e;
            margin: 100px auto;
            padding: 30px;
            width: 400px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .tip-modal h2 {
            color: #ffd700;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .tip-content {
            color: #4ecca3;
            line-height: 1.6;
            text-align: center;
            font-size: 16px;
            white-space: pre-line;
        }

        /* 顶部控制栏 */
        .header-controls {
            height: 40px;
            background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
            display: flex;
            align-items: center;
            padding: 0 20px;
            gap: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            z-index: 100;
            flex-shrink: 0;
        }

        /* 主容器 */
        .main-container {
            flex: 1;
            display: flex;
            overflow: hidden;
            height: 100vh;
        }

        /* 左侧模型预览 */
        .preview-area {
            flex: 1;
            position: relative;
            background: #0d1b2a;
            min-height: 0;
margin-right: 320px;  /* ← 加上这一行 */
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* 右侧控制面板样式调整 - 更紧凑 */
        .control-panel {
            width: 320px;
            background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
            padding: 15px;
            overflow-y: auto;
            box-shadow: -2px 0 15px rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            height: 100vh;
            position: fixed;
            right: 0;
            top: 104px;
            z-index: 10;
            padding-bottom: 130px;
        }

        /* 控制面板切换按钮 - 移动到控制区顶部 */
        .panel-toggle {
            display: flex;
            margin-bottom: 15px;
            border: 1px solid #4ecca3;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .panel-toggle-btn {
            flex: 1;
            padding: 8px 0;
            background: transparent;
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .panel-toggle-btn.active {
            background: #4ecca3;
            color: #000;
            font-weight: bold;
        }

        /* 紧凑面板 - 更紧凑 */
        .mini-panel {
            margin-bottom: 10px; /* 进一步减少间距 */
            background: rgba(15, 52, 96, 0.5);
            border-radius: 6px;
            padding: 6px; /* 进一步减少内边距 */
        }

        h3 {
            font-size: 12px; /* 进一步减小字体 */
            margin-bottom: 6px; /* 进一步减少间距 */
            color: #4ecca3;
            border-bottom: 1px solid #4ecca3;
            padding-bottom: 4px; /* 进一步减少内边距 */
        }

        .btn {
            padding: 8px 10px; /* 进一步减小内边距 */
            background: linear-gradient(to right, #4ecca3, #38b592);
            color: #000;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 10px; /* 进一步减小字体 */
            font-weight: bold;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 2px; /* 进一步减少间距 */
        }

        .btn:hover {
            background: linear-gradient(to right, #38b592, #2a9d7f);
            transform: translateY(-1px);
        }

        /* 骨骼调整 */
        .bone-controls {
            max-height: 250px; /* 进一步减小高度 */
          overflow-y: hidden;
        }

        .slider-container {
            position: relative;
            margin: 4px 0; /* 进一步减少间距 */
        }

        .slider {
            width: 100%;
            height: 4px;
            border-radius: 2px;
            background: #0f3460;
            outline: none;
            -webkit-appearance: none;
            margin: 3px 0; /* 进一步减少间距 */
            z-index: 2;
            position: relative;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px; /* 进一步减小 */
            height: 10px; /* 进一步减小 */
            border-radius: 50%;
            background: #4ecca3;
            cursor: pointer;
            z-index: 3;
        }

        .slider-scale {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            z-index: 1;
            transform: translateY(-50%);
        }

        .slider-tick {
            position: absolute;
            top: 50%;
            width: 1px;
            height: 6px; /* 进一步减小 */
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%);
            z-index: 1;
        }

        .slider-tick.zero {
            background: #4ecca3;
            height: 10px; /* 进一步减小 */
            width: 2px;
        }

        .slider-value {
            font-size: 8px; /* 进一步减小字体 */
            text-align: center;
            margin-top: 1px; /* 进一步减少间距 */
            color: #4ecca3;
        }

        /* 时间轴区域 - 固定在底部 */
        .timeline-area {
            height: 180px;
            background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
            border-top: 1px solid #4ecca3;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow: hidden;
            width: calc(100% - 320px);
        }

        /* 主时间轴 */
        .main-timeline {
            height: 40px;
            display: flex;
            align-items: center;
            padding: 0 15px;
            gap: 10px;
            border-bottom: 1px solid rgba(78, 204, 163, 0.3);
        }

        .timeline-mini {
            flex: 1;
            height: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .keyframe-mini {
            position: absolute;
            width: 6px; /* 进一步减小 */
            height: 6px; /* 进一步减小 */
            background: #e94560;
            border-radius: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }

        .keyframe-mini.selected {
            background: #ffd700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
            width: 8px; /* 进一步减小 */
            height: 8px; /* 进一步减小 */
        }

        .playhead-mini {
            position: absolute;
            width: 2px;
            height: 100%;
            background: #4ecca3;
            top: 0;
            left: 0;
        }

        /* 模型时间轴容器 */
       .model-timelines-container {
    flex: 1;
    overflow-y: auto;  /* 确保有滚动条 */
    padding: 5px 15px;
    max-height: 140px;  /* 加一个最大高度限制 */
margin-bottom: 20px;
}
        .model-timeline {
            margin-bottom: 4px; /* 进一步减少间距 */
            background: rgba(15, 52, 96, 0.5);
            border-radius: 4px;
            padding: 3px 6px; /* 进一步减少内边距 */
            height: 24px; /* 进一步减小高度 */
            display: flex;
            align-items: center;
        }

        .model-timeline-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2px; /* 进一步减少间距 */
            width: 100%;
        }

        .model-timeline-name {
            font-size: 9px; /* 进一步减小字体 */
            color: #ffd700;
            font-weight: bold;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .model-timeline-buttons {
            display: flex;
            gap: 3px; /* 进一步减少间距 */
        }

        .model-timeline-buttons .btn {
            width: auto;
            padding: 2px 4px; /* 进一步减小内边距 */
            font-size: 7px; /* 进一步减小字体 */
            margin-bottom: 0;
        }

        .model-timeline-track {
            flex: 1;
            height: 10px; /* 进一步减小高度 */
            background: rgba(0, 0, 0, 0.3);
            border-radius: 5px; /* 进一步减小圆角 */
            position: relative;
            overflow: hidden;
            margin: 0 6px; /* 进一步减少间距 */
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            border-radius: 5px;
            background: rgba(15, 52, 96, 0.9);
            color: #4ecca3;
            border: 1px solid #4ecca3;
            transform: translateX(150%);
            transition: transform 0.3s ease;
            z-index: 1000;
            font-size: 12px;
        }

        .notification.show {
            transform: translateX(0);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            flex-direction: column;
            color: #4ecca3;
            font-size: 16px;
        }

        .spinner {
            width: 30px;
            height: 30px;
            border: 3px solid rgba(78, 204, 163, 0.3);
            border-top: 3px solid #4ecca3;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }

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

        /* 文件上传按钮样式 */
        input[type="file"] {
            display: none;
        }

        .upload-group {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .upload-group .btn {
            flex: 1;
            margin-bottom: 0;
        }

        .button-group {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
        }

        .button-group .btn {
            flex: 1;
            margin-bottom: 0;
        }

        select {
            width: 100%;
            padding: 4px;
            background: rgba(15,52,96,0.8);
            color: white;
            border: 1px solid #4ecca3;
            border-radius: 3px;
            font-size: 10px;
            margin-bottom: 8px;
        }

        .color-input {
            width: 100%;
            height: 20px; /* 进一步减小高度 */
            padding: 2px;
            background: transparent;
            border: 1px solid #4ecca3;
            border-radius: 3px;
            margin-bottom: 8px;
        }
        
        /* 背景颜色选择器样式增强 */
        .bg-control-section {
            margin-bottom: 8px;
        }
        
        .bg-mode-toggle {
            display: flex;
            margin-bottom: 8px;
            border: 1px solid #4ecca3;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .bg-mode-btn {
            flex: 1;
            padding: 3px 0; /* 进一步减小内边距 */
            background: transparent;
            border: none;
            color: white;
            font-size: 9px; /* 进一步减小字体 */
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .bg-mode-btn.active {
            background: #4ecca3;
            color: #000;
            font-weight: bold;
        }
        
        .bg-color-options {
            display: flex;
            flex-wrap: wrap;
            gap: 5px; /* 进一步减少间距 */
            margin-bottom: 8px;
        }
        
        .bg-color-option {
            width: 20px; /* 进一步减小 */
            height: 20px; /* 进一步减小 */
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: 2px solid transparent;
            position: relative;
        }
        
        .bg-color-option:hover {
            transform: scale(1.1);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
        }
        
        .bg-color-option.selected::after {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
            font-size: 10px; /* 进一步减小字体 */
        }
        
        .bg-preset-section {
            margin-bottom: 8px;
        }
        
        .bg-preset-title {
            font-size: 9px;
            color: #4ecca3;
            margin-bottom: 4px;
        }
        
        .bg-custom-controls {
            display: flex;
            gap: 4px;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .bg-hex-input {
            flex: 1;
            padding: 4px;
            background: rgba(15,52,96,0.8);
            color: white;
            border: 1px solid #4ecca3;
            border-radius: 3px;
            font-size: 9px;
        }
        
        .bg-alpha-control {
            margin-top: 8px;
        }
        
        .bg-alpha-label {
            font-size: 9px;
            display: block;
            margin-bottom: 2px;
        }
        
        .quality-toggle {
            position: absolute;
            top: 10px;
            right: 20px;
            background: rgba(0, 0, 0, 0.6);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 11px;
            color: #4ecca3;
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .quality-toggle input {
            margin: 0;
        }
        
        /* 材质预览 */
        .material-preview {
            width: 100%;
            height: 40px; /* 进一步减小高度 */
            background: #0f3460;
            border-radius: 4px;
            margin-bottom: 8px;
            overflow: hidden;
            position: relative;
        }

        .material-preview-inner {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, #222, #444);
        }

        .material-ball {
            width: 40px; /* 进一步减小 */
            height: 40px; /* 进一步减小 */
            border-radius: 50%;
            background: linear-gradient(145deg, #ffffff, #cccccc);
            box-shadow: 0 0 15px rgba(0,0,0,0.5);
        }
        
        /* 导出进度条样式 */
        .export-progress {
            width: 80%;
            height: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin-top: 15px;
            overflow: hidden;
        }
        
        .export-progress-bar {
            height: 100%;
            background: linear-gradient(to right, #4ecca3, #38b592);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        
        /* 模型平移控制 */
        .model-translation {
            display: flex;
            flex-direction: column;
            gap: 6px; /* 进一步减少间距 */
            margin-top: 6px; /* 进一步减少间距 */
        }
        
        .translation-axis {
            display: flex;
            align-items: center;
            gap: 3px; /* 进一步减少间距 */
        }
        
        .axis-label {
            width: 16px; /* 进一步减小 */
            text-align: center;
            font-size: 10px; /* 进一步减小字体 */
            font-weight: bold;
        }
        
        .translation-slider {
            flex: 1;
        }
        
        .translation-value {
            width: 30px; /* 进一步减小 */
            text-align: center;
            font-size: 9px; /* 进一步减小字体 */
            color: #4ecca3;
        }
        
        .translation-buttons {
            display: flex;
            gap: 3px; /* 进一步减少间距 */
            margin-top: 3px; /* 进一步减少间距 */
        }
        
        .translation-buttons .btn {
            flex: 1;
            font-size: 9px; /* 进一步减小字体 */
            padding: 3px; /* 进一步减小内边距 */
        }
        
        /* 新增时间轴按钮样式 */
        .timeline-buttons {
            display: flex;
            gap: 4px;
            margin-left: auto;
        }
        
        .timeline-buttons .btn {
            width: auto;
            padding: 4px 8px;
            font-size: 10px;
            margin-bottom: 0;
        }
        
        /* 多模型支持样式 */
        .model-manager {
            margin-bottom: 12px;
            background: rgba(15, 52, 96, 0.5);
            border-radius: 6px;
            padding: 10px;
        }
        
        .model-list {
            max-height: 130px; /* 进一步减小高度 */
            overflow-y: auto;
            margin-bottom: 8px;
            border: 1px solid rgba(78, 204, 163, 0.3);
            border-radius: 4px;
            padding: 4px;
        }
        
        .model-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 5px; /* 进一步减少内边距 */
            margin-bottom: 2px; /* 进一步减少间距 */
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .model-list-item:hover {
            background: rgba(78, 204, 163, 0.2);
        }
        
        .model-list-item.active {
            background: rgba(78, 204, 163, 0.4);
            border-left: 3px solid #4ecca3;
        }
        
        .model-name-display {
            font-size: 9px; /* 进一步减小字体 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%;
        }
        
        .model-actions {
            display: flex;
            gap: 2px;
        }
        
        .model-action-btn {
            background: transparent;
            border: none;
            color: #4ecca3;
            cursor: pointer;
            font-size: 8px; /* 进一步减小字体 */
            padding: 1px 3px; /* 进一步减小内边距 */
            border-radius: 2px;
            transition: all 0.2s ease;
        }
        
        .model-action-btn:hover {
            background: rgba(78, 204, 163, 0.2);
        }
        
        .model-action-btn.delete:hover {
            color: #e94560;
            background: rgba(233, 69, 96, 0.2);
        }
        
        /* 模型控制区域 - 修改为占满剩余高度 */
        .model-controls-section {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .model-controls-container {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 8px;
padding-bottom: 200px;
        }
        
        /* 时间轴标尺 */
        .timeline-ruler {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            pointer-events: none;
        }
        
        /* 控制按钮样式 */
        .timeline-controls {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        
        .timeline-controls .btn {
            width: auto;
            padding: 4px 6px;
            font-size: 9px;
            margin-bottom: 0;
        }
        
        /* 时间显示 */
        .time-display {
            font-size: 10px;
            color: #4ecca3;
            min-width: 70px;
            text-align: center;
        }
        
        /* 新增：顶部控制栏布局调整 */
        .header-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: auto;
        }
        
        .header-model-manager {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .header-model-list {
            max-width: 140px;
            max-height: 30px;
            overflow: hidden;
            border: 1px solid #4ecca3;
            border-radius: 4px;
            background: rgba(15, 52, 96, 0.8);
            color: white;
            font-size: 10px;
            padding: 4px;
        }
        
        .compact-btn {
            padding: 4px 6px;
            font-size: 10px;
            width: auto;
        }
        
        .compact-btn-group {
            display: flex;
            gap: 2px;
        }
        
        .compact-btn-group .btn {
            margin-bottom: 0;
            padding: 4px 6px;
            font-size: 10px;
        }
        
        .export-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 新增：顶部模型选择器样式 */
        .model-selector-compact {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(15, 52, 96, 0.8);
            border: 1px solid #4ecca3;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 10px;
        }
        
        .model-selector-compact select {
            width: auto;
            background: transparent;
            border: none;
            color: white;
            font-size: 10px;
            margin-bottom: 0;
        }
        
        .model-selector-compact select option {
            background: #0f3460;
        }
        
        /* 新增：控制面板底部间距调整 */
        .control-panel-bottom-spacing {
            height: 8px;
        }
        
        /* 新增：紧凑摄像机控制模块在预览区右下角 */
     .camera-controls-compact {
    position: absolute;
    bottom: -1px;
    right: 3px;
    background: rgba(15, 52, 96, 0.8);
    border-radius: 3px;
    padding: 2px;
    z-index: 3;
    border: 1px solid #4ecca3;
    width: 160px;
    overflow-y: auto;
}
  
}
.camera-controls-compact .btn {
    font-size: 13px; /* 调整为想要的字体大小 */
}
.camera-controls-compact h3 {
    font-size: 10px;
margin-bottom: 2px;  /* 改成2px或更小 */
    margin-top: 2px;     /* 新增 */
    text-align: center;
}

.camera-controls-compact .slider-container {
    margin: 0px 0; /* 更紧凑的间距 */
}

.camera-controls-compact .slider {
    height: 2px; /* 更细的滑块轨道 */
    margin: 1px 0;
}

.camera-controls-compact .slider::-webkit-slider-thumb {
    width: 5px; /* 更小的拖动点 */
    height: 5px;
}

.camera-controls-compact .slider-scale {
    height: 2px; /* 匹配滑块轨道高度 */
}

.camera-controls-compact .slider-tick {
    height: 4px;
}

.camera-controls-compact .slider-tick.zero {
    height: 6px;
}

.camera-controls-compact .slider-value {
    font-size: 8px;
    margin-top: 0;
}

.camera-controls-compact label {
    font-size: 10px;
    margin-bottom: 0;
    line-height: 0.6;
}

        /* 场景控制面板样式 */
        .scene-controls-container {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 8px;
            display: none;
        }
        
        .scene-controls-container.active {
            display: block;
        }
        
        .background-image-controls {
            margin-bottom: 10px;
        }
        
        .background-control-group {
            margin-bottom: 8px;
        }
        
        .background-control-group h4 {
            font-size: 11px;
            color: #4ecca3;
            margin-bottom: 4px;
        }
        
        .background-control-row {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
        }
        
        .background-control-label {
            width: 60px;
            font-size: 9px;
        }
        
        .background-control-slider {
            flex: 1;
        }
        
        .background-control-value {
            width: 30px;
            text-align: center;
            font-size: 9px;
            color: #4ecca3;
        }
        
        .background-image-preview {
            width: 100%;
            height: 80px;
            background: #0f3460;
            border-radius: 4px;
            margin-bottom: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .background-image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .background-image-preview .remove-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #e94560;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: 10px;
        }
        
       
    
        .preview-model-manager .btn {
            width: auto;
            padding: 4px 8px;
            font-size: 10px;
        }
        
        /* 新增：摄像机比例控制样式 */
        .camera-aspect-ratio {
            margin-bottom: 8px;
        }
        
        .camera-aspect-ratio label {
            font-size: 9px;
            display: block;
            margin-bottom: 4px;
            color: #4ecca3;
        }
        
        .camera-aspect-ratio select {
            width: 100%;
            padding: 4px;
            background: rgba(15,52,96,0.8);
            color: white;
            border: 1px solid #4ecca3;
            border-radius: 3px;
            font-size: 10px;
        }
        
        /* 新增：摄像机框样式 */
        .camera-frame {
            position: absolute;
            border: 2px dashed rgba(255, 215, 0, 0.7);
            pointer-events: none;
            z-index: 5;
        }

/* 1. 保留原来的控制面板样式，但增加特异性 */
.control-panel .project-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* 2. 为顶部控制栏创建完全不同的类名，避免冲突 */
.header-project-controls {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.header-project-controls .btn {
    flex: none !important;  /* 覆盖原来的 flex: 1 */
    width: auto !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    margin-bottom: 0 !important;
}

/* 灯光控制面板样式 */
.lighting-controls-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
    display: none;
}

.lighting-controls-container.active {
    display: block;
}

/* 灯光预设样式 */
.lighting-preset-group {
    margin-bottom: 12px;
}

.lighting-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.lighting-preset-btn {
    padding: 6px;
    background: rgba(15, 52, 96, 0.6);
    color: #4ecca3;
    border: 1px solid #4ecca3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
}

.lighting-preset-btn:hover {
    background: #4ecca3;
    color: #000;
}

.lighting-preset-btn.active {
    background: #4ecca3;
    color: #000;
    font-weight: bold;
}

/* ====== 美化样式 ====== */

/* 站点 Logo 样式 */
.site-logo {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.page-title {
    display: flex;
    align-items: center;
    color: #ffd700;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* 弹窗美化 */
.tip-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.tip-modal-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: logo-float 3s ease-in-out infinite;
}


.qrcode-container {
    margin: 25px 0;
    padding: 15px;
    background: rgba(78, 204, 163, 0.1);
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(78, 204, 163, 0.3);
}

.qrcode-img {
    width: 180px;
    height: 180px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.qrcode-img:hover {
    transform: scale(1.05);
}

.qrcode-text {
    color: #4ecca3;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
}

.gzh-logo-container {
    position: absolute;
    bottom: 15px;
    right: 15px;
margin-top: -80px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 52, 96, 0.8);
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #4ecca3;
    animation: slideIn 0.5s ease-out;
bottom: 45px;
}

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

.gzh-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.gzh-text {
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
}

.tip-modal-content {
    position: relative;
    background: #16213e;
    margin: 10px auto;
    padding: 10px;
    width: 600px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    max-height: 100vh;
    overflow-y: auto;
}

.tip-content {
    color: #4ecca3;
    line-height: 1.8;
    text-align: center;
    font-size: 16px;
    white-space: pre-line;
    padding: 10px 0;
    border-top: 1px solid rgba(78, 204, 163, 0.3);
    border-bottom: 1px solid rgba(78, 204, 163, 0.3);
    margin: 15px 0;
}
/* 重要提示弹窗标题样式 - 添加这一部分 */
/* 在style.css中添加或修改 */

.tip-modal-content h2 {
    display: flex;
    align-items: center;  /* 垂直居中对齐 */
    justify-content: center; /* 水平居中 */
    gap: 15px; /* 控制logo和文字之间的间距 */
    margin-bottom: 20px;
}

.tip-modal-logo {
    width: 60px;
    height: 60px;
    /* 删除 margin-bottom: 15px; 因为flex布局的gap已经控制了间距 */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: logo-float 3s ease-in-out infinite;
}
.tip-modal-title {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    margin: 0;
}
/* 添加头部按钮组样式 */
.header-buttons-group {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.header-btn {
    background: linear-gradient(to right, #4ecca3, #38b592);
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 12px;
}

.header-btn:hover {
    background: linear-gradient(to right, #38b592, #2a9d7f);
    transform: translateY(-1px);
}

/* 赞赏弹窗样式 */
.donation-content {
    text-align: center;
    color: #4ecca3;
    line-height: 1.6;
    padding: 20px; /* 增加内边距 */
}
#tipModal .qrcode-img {
    width: 150px !important;    /* 公众号二维码可以小一点 */
    height: 150px !important;
    margin: 15px auto;
}

/* 赞赏弹窗 - 赞赏码（较大） */
#donationModal .qrcode-img {
    width: 350px !important;    /* 赞赏码要大一点，方便扫码 */
    height: 350px !important;
    margin: 20px auto;
}

.close-btn {
    margin-top: 20px;
    background: linear-gradient(to right, #e94560, #d13453);
}

.close-btn:hover {
    background: linear-gradient(to right, #d13453, #b82a47);
}
.animation-controls-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
    display: none;
}

/* 确保动画面板显示时正确 */
.animation-controls-container[style*="display: block"] {
    display: block !important;
}



/* 在style.css最后添加这一整块 */
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

/* 统一的按钮操作组 */
.action-buttons-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto; /* 推到右边 */
}

.action-buttons-group .btn {
    width: auto;
    padding: 4px 8px;
    font-size: 10px;
    margin-bottom: 0;
}

/* ==================== 头部控制栏布局修复 ==================== */

/* 主容器：强制使用Flex布局 */
.header-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important; /* 控制大组之间的间距 */
    padding: 0 15px !important;
}

/* 左侧上传组 */
.header-left-section {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important; /* 防止被压缩 */
}

/* 中间操作按钮组 - 关键：让按钮紧密排列 */
/* 中间操作按钮组 */
.action-buttons-group {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important; /* 按钮之间的基础间距 */
    flex: 1 !important;
    justify-content: flex-start !important;
}

.action-buttons-group .btn {
    width: auto !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ✅ 新增：导出工程按钮前增加间距 */
.action-buttons-group .btn[onclick="exportProject()"] {
    margin-left: 45px !important; /* 调整这个数值来改变间距大小 */
}

/* 右侧时间组 */
.header-right-section {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important; /* 推到最右边 */
}

/* 上传按钮组样式 */
.upload-group {
    display: flex !important;
    gap: 6px !important;
}

.upload-group .btn {
    margin-bottom: 0 !important;
}

/* 模型选择器样式 */
.model-selector-compact {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(15, 52, 96, 0.8) !important;
    border: 1px solid #4ecca3 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
}

.model-selector-compact select {
    width: auto !important;
    min-width: 80px !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 10px !important;
    margin-bottom: 0 !important;
}

/* 移除之前的冲突样式 */
.preview-model-manager {
    display: none !important; /* 彻底隐藏预览区的重复按钮 */
}


/* 确保关键帧和播放头显示在波形上方 */
.playhead-mini, .keyframe-mini {
    position: absolute;
    z-index: 10 !important;
}


/* 确保时间轴容器可见 */
.timeline-mini {
    position: relative !important;
    background: rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

/* 确保波形画布层级正确 */
#waveformCanvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.keyframe-mini {
    position: absolute !important;
    z-index: 10 !important;
}

/* 删除音频按钮样式 */
#removeAudioBtn {
    background: linear-gradient(to right, #e94560, #d13453) !important;
    display: none; /* 默认隐藏 */
}

#removeAudioBtn:hover {
    background: linear-gradient(to right, #d13453, #b82a47) !important;
}

#includeAudioOption { 
    display: none; 
}

/* 网格控制复选框样式 */



.quality-toggle label {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* 强制增大控制面板所有标签字体 */
.control-panel label {
    font-size: 11px !important;
}

/* 特别增大骨骼控制标签 */
.bone-controls label {
    font-size: 11px !important;
}

/* ===== 飞花3D快速美化包 - 粘贴到 style.css 文件末尾即可 ===== */

/* 1. 文字变大 */
.control-panel * { font-size: 11px !important; }

/* 2. 按钮圆润有阴影 */
.btn, .header-btn {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  transition: all 0.2s ease !important;
}
.btn:hover, .header-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* 3. 滑块变粗好看 */
.slider {
  height: 6px !important;
  border-radius: 3px !important;
  background: #0f3460 !important;
}
.slider::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  background: #4ecca3 !important;
  border: 2px solid white !important;
  box-shadow: 0 0 5px rgba(78,204,163,0.5) !important;
}

/* 新手教程弹窗加宽 */
#tutorialModal .tip-modal-content {
    width: 750px !important;  /* 默认400px，改成550px或更大 */
    max-width: 90vw !important; /* 在手机屏幕上不超出视口 */
}

/* 教程弹窗文字左对齐 */
#tutorialModal .tip-content {
    text-align: left !important;
}

/* ===== 预览区左上角质量控制 ===== */
.quality-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #4ecca3;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(78, 204, 163, 0.3);
}

.quality-option {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    cursor: pointer;
    color: #fff;
}

.quality-option input {
    margin: 0 !important;
    cursor: pointer;
    width: 14px;
    height: 14px;
}

/* ===== 圆形视角切换按钮 ===== */
.view-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4ecca3, #38b592);
    color: #000;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px !important;
    z-index: 20;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.view-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #38b592, #2a9d7f);
}

/* 顶视图状态（显示"原"字时变红色） */
.view-toggle-btn.original-view {
    background: linear-gradient(135deg, #e94560, #d13453);
}

.view-toggle-btn.original-view:hover {
    background: linear-gradient(135deg, #d13453, #b82a47);
}

/* 网站底部备案信息 */
/* 网站底部备案信息 - 固定在视口最底部，全宽显示 */
.website-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;  /* 全宽 */
    width: 100%;  /* 明确全宽 */
    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
    border-top: 1px solid #4ecca3;
    padding: 8px 20px;
    text-align: center;
    font-size: 11px;
    color: #4ecca3;
    z-index: 1000;  /* 提高层级，确保在最上层 */
}

.footer-content p {
    margin: 0;
}

.footer-content a {
    color: #4ecca3;
    text-decoration: none;
}

.footer-content a:hover {
    color: #ffd700;
    text-decoration: underline;
}