/* 
   ==========================================================================
   LeiYaJia 3D Pro - UI Redesign (Professional Clean Light Theme)
   ========================================================================== 
*/

:root {
    /* 干净明亮的面板背景，保留轻微的毛玻璃质感 */
    --panel-bg: rgba(255, 255, 255, 0.9);
    --panel-border: rgba(0, 0, 0, 0.06);
    --panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.03);
    --panel-blur: blur(24px) saturate(150%);
    
    /* 核心强调色：专业沉稳的靛蓝色 */
    --primary-color: #4361ee;
    --primary-hover: #3a56d4;
    --primary-light: rgba(67, 97, 238, 0.1);
    --primary-gradient: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    
    /* 状态颜色 */
    --danger-color: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.1);
    --warning-color: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    
    /* 文字颜色：高对比度，确保清晰可读 */
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    
    /* 表单控件背景 */
    --bg-input: #f3f4f6;
    --border-input: #e5e7eb;
    
    /* 圆角规范 */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
}

/* Base Resets */
body {
    margin: 0;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    touch-action: none;
    background-color: #f3f4f6;
    color: var(--text-main);
}

/* 3D Canvas Background Override - 专业软件的网格背景 */
canvas {
    background-color: #f3f4f6 !important;
    background-image: radial-gradient(#d1d5db 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

/* ==================== STRUCTURAL LAYOUT ==================== */

#control-panel, #stage-panel, #roof-panel, #screen-panel, #model-combination-panel, #stats, #menu-panel {
    background: var(--panel-bg) !important;
    backdrop-filter: var(--panel-blur) !important;
    -webkit-backdrop-filter: var(--panel-blur) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--panel-shadow) !important;
    color: var(--text-main) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

/* 避免面板遮挡顶部居中的导航栏 */
#control-panel, #stage-panel, #roof-panel, #screen-panel, #model-combination-panel, #stats {
    top: 80px !important; 
}

.panel-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 16px 20px !important;
    color: var(--text-main) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.panel-header h3 {
    color: var(--text-main) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    flex: 1;
    text-align: center;
}

.post-type-indicator {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-left: 8px;
    vertical-align: middle;
}

.toggle-icon {
    position: absolute;
    right: 20px;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    transition: transform 0.3s ease;
}
.toggle-icon.collapsed {
    transform: rotate(-90deg);
}

.panel-content {
    padding: 16px !important;
    background: transparent !important;
    color: var(--text-main) !important;
    transition: max-height 0.3s ease-out, opacity 0.2s, padding 0.2s;
    max-height: 750px;
    opacity: 1;
    overflow-y: auto;
}

.panel-content.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 16px !important;
    overflow: hidden !important;
}

.param-row, .params-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}

.param-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.param-control {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ==================== BUTTONS ==================== */
button {
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

/* 顶部和底部导航重构为悬浮的胶囊形态 (Floating Dock) */
#menu-buttons, #menu-buttons ~ div[style*="bottom: 10px"] {
    background: var(--panel-bg) !important;
    backdrop-filter: var(--panel-blur) !important;
    -webkit-backdrop-filter: var(--panel-blur) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-full) !important;
    padding: 6px !important;
    gap: 4px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 95vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}

/* 隐藏原有丑陋的边框 */
#menu-buttons button, #menu-buttons ~ div[style*="bottom: 10px"] button {
    border-right: none !important;
}

#menu-buttons {
    top: 15px !important;
}

#menu-buttons ~ div[style*="bottom: 10px"] {
    bottom: 20px !important;
}

#menu-buttons button, #menu-buttons ~ div[style*="bottom: 10px"] button {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-full) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

#menu-buttons button:hover, #menu-buttons ~ div[style*="bottom: 10px"] button:hover {
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
}

/* Primary Actions */
#start-create-btn {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: var(--text-inverse) !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3) !important;
    border-radius: var(--radius-full) !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    bottom: 90px !important; /* 避免遮挡底部导航 */
}
#start-create-btn:hover {
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(67, 97, 238, 0.4) !important;
}

#orbit-controls-btn {
    background: var(--panel-bg) !important;
    backdrop-filter: var(--panel-blur) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    bottom: 90px !important;
    right: 20px !important;
}
#orbit-controls-btn:hover {
    background: var(--bg-input) !important;
}

/* 面板内部按钮 */
.panel-content button {
    background: var(--bg-input) !important;
    border: 1px solid transparent !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500 !important;
}
.panel-content button:hover {
    background: #e5e7eb !important;
}

button[id*="create"], button[id*="generate"], button[id="detect-alignment"] {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}
button[id*="create"]:hover, button[id*="generate"]:hover, button[id="detect-alignment"]:hover {
    background: var(--primary-color) !important;
    color: var(--text-inverse) !important;
}

button[id*="delete"] {
    background: var(--danger-light) !important;
    color: var(--danger-color) !important;
}
button[id*="delete"]:hover {
    background: var(--danger-color) !important;
    color: var(--text-inverse) !important;
}

button[id*="lock"] {
    background: var(--warning-light) !important;
    color: var(--warning-color) !important;
}

/* 优先级切换按钮 (2米优先/1.5米优先) */
.priority-btn {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-muted) !important;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    flex: 1;
    font-weight: 500;
}
.priority-btn.active {
    background: var(--primary-color) !important;
    color: var(--text-inverse) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2) !important;
}
.priority-group {
    display: flex;
    gap: 8px;
}

/* ==================== INPUTS & SELECTS ==================== */
input[type="number"], input[type="text"], select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    width: 100%;
    box-shadow: none !important;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus {
    border-color: var(--primary-color) !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15) !important;
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
}
select option {
    background: #fff !important;
    color: var(--text-main) !important;
}

.param-label, label, span[style*="color: #666"] {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 6px;
    text-transform: none; 
}

input[type="color"] {
    background: transparent !important;
    border: 1px solid var(--border-input) !important;
    padding: 2px !important;
    border-radius: var(--radius-sm) !important;
    height: 36px !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ==================== 彻底修复统计面板 (Stats Panel Fixes) ==================== */
#stats .panel-content {
    background: transparent !important;
}

/* 强制统计面板内所有文字颜色，覆盖原有内联样式导致看不清的问题 */
#stats .panel-content * {
    color: var(--text-main) !important;
}

/* 美化 JS 动态生成的内部数据卡片 */
#stats .panel-content > div {
    background: #fff !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    margin-bottom: 12px !important;
}

/* 特殊处理“总计”高亮块 */
#stats .panel-content div[style*="color: #4361ee"], 
#stats .panel-content div[style*="border: 1px solid #4361ee"] {
    color: var(--primary-color) !important;
    background: var(--primary-light) !important;
    border-color: rgba(67, 97, 238, 0.2) !important;
}

/* ==================== DIALOGS ==================== */
#custom-confirm-dialog > div, #texture-dialog > div {
    background: var(--panel-bg) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--panel-border) !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.1) !important;
    border-radius: var(--radius-lg) !important;
}
#custom-confirm-dialog h3, #texture-dialog h3 { color: var(--text-main) !important; }
#custom-confirm-dialog p { color: var(--text-muted) !important; }
#confirm-cancel { background: var(--bg-input) !important; color: var(--text-main) !important; }
#confirm-ok { background: var(--danger-color) !important; color: var(--text-inverse) !important; }

/* ==================== SCROLLBARS ==================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }

/* Misc Tweaks */
#rotation-display {
    background: var(--panel-bg) !important;
    backdrop-filter: var(--panel-blur) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border-radius: var(--radius-full) !important;
    padding: 8px 16px !important;
    bottom: 160px !important; 
}

.tip-message {
    background: var(--panel-bg) !important;
    backdrop-filter: var(--panel-blur) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--text-main) !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

#menu-panel { padding: 8px !important; }
#menu-panel button {
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-sm) !important;
}
#menu-panel button:hover { background: var(--bg-input) !important; }