/* SenrCNC V3.0 Style - Cyan/Teal Theme */
:root {
    --primary: #06b6d4; --primary-dark: #0891b2; --accent: #3b82f6;
    --bg-gradient: linear-gradient(135deg, #f0f9ff 0%, #cffafe 100%);
    --surface-glass: rgba(255, 255, 255, 0.85);
    --text-main: #164e63; --text-sub: #64748b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg-gradient); color: var(--text-main); height: 100vh; overflow: hidden; }

/* 布局 */
.app-container { display: flex; height: 100vh; width: 100vw; }
.sidebar { width: 360px; background: var(--surface-glass); border-right: 1px solid white; display: flex; flex-direction: column; z-index: 10; backdrop-filter: blur(20px); }
.main-content { flex: 1; padding: 40px; overflow-y: auto; position: relative; }

/* Sidebar 组件 */
.brand { height: 80px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,0.5); gap: 12px; }
.logo-icon { width: 36px; height: 36px; background: var(--primary); border-radius: 8px; color: white; display: flex; align-items: center; justify-content: center; }
.brand-text { font-weight: 800; font-size: 18px; }
.badge.cyan { font-size: 10px; background: #ecfeff; color: var(--primary-dark); padding: 2px 6px; border-radius: 4px; border: 1px solid #a5f3fc; margin-left: 5px;}

.scrollable-form { flex: 1; overflow-y: auto; padding: 24px; }
.form-section { margin-bottom: 30px; }
.form-section h3 { font-size: 12px; color: var(--text-sub); margin-bottom: 15px; display: flex; gap: 8px; align-items: center; }

/* 输入框 */
.input-group { display: flex; gap: 10px; margin-bottom: 15px; }
.three-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.floating-input { position: relative; width: 100%; }
.floating-input input, select { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: rgba(255,255,255,0.6); font-family: inherit; }
.floating-input input:focus { border-color: var(--primary); outline: none; background: white; }
.floating-input label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #94a3b8; pointer-events: none; transition: 0.2s; }
.floating-input input:not(:placeholder-shown) ~ label, .floating-input input:focus ~ label { top: 0; background: white; padding: 0 4px; color: var(--primary); font-size: 10px; }

.select-wrapper { width: 100%; }
.select-label { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 4px; font-weight: 600; }

.action-area { padding: 20px; border-top: 1px solid rgba(255,255,255,0.5); }
.btn-primary-glow { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--primary), var(--accent)); border: none; border-radius: 12px; color: white; font-weight: 600; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; gap: 8px; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3); }
.btn-primary-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4); }

/* --- 3D 交互特定样式 --- */
.drop-overlay { 
    position: absolute; inset: 0; background: rgba(6, 182, 212, 0.9); z-index: 100; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.3s; backdrop-filter: blur(4px);
}
.drop-overlay.active { opacity: 1; pointer-events: all; }
.drop-icon { font-size: 60px; color: white; animation: bounce 1s infinite; }
.drop-text { color: white; font-size: 24px; font-weight: 800; margin-top: 20px; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

#viewerContainer { width: 100%; height: 60vh; background: rgba(255,255,255,0.5); border-radius: 16px; position: relative; overflow: hidden; display: none; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); }
#viewerCanvas { width: 100%; height: 100%; outline: none; }
.reset-3d-btn { position: absolute; top: 20px; right: 20px; z-index: 10; background: white; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80%; text-align: center; color: var(--text-sub); }
.icon-circle { width: 80px; height: 80px; background: #ecfeff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--primary); margin-bottom: 20px; }

/* 结果面板 */
.hidden { display: none !important; }
.result-dashboard { margin-top: 20px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.hero-price-card.cyan-card { background: linear-gradient(135deg, #0891b2, #0e7490); padding: 20px 30px; border-radius: 16px; color: white; text-align: right; box-shadow: 0 10px 25px -5px rgba(8, 145, 178, 0.4); }
.price-value-wrapper h2 { font-size: 36px; margin: 0; font-family: 'JetBrains Mono'; }
.price-label { font-size: 10px; opacity: 0.8; letter-spacing: 1px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.glass-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border: 1px solid white; border-radius: 16px; padding: 24px; }
.params-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.param-box { background: rgba(255,255,255,0.6); padding: 12px; border-radius: 8px; text-align: center; }
.param-box strong { display: block; font-size: 16px; color: var(--text-main); font-family: 'JetBrains Mono'; }
.param-box span { font-size: 11px; color: var(--text-sub); }

.cost-list { list-style: none; margin-bottom: 20px; }
.cost-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e2e8f0; font-size: 13px; }
.val { font-family: 'JetBrains Mono'; font-weight: 600; }
.final-total { display: flex; justify-content: space-between; padding-top: 15px; border-top: 2px solid #cbd5e1; font-size: 18px; font-weight: 800; color: var(--primary-dark); }

.btn-export { width: 100%; padding: 10px; margin-top: 15px; border: 1px solid #cbd5e1; background: white; border-radius: 8px; cursor: pointer; }
.chart-container { height: 200px; position: relative; }
.sync-status { padding: 8px 24px; font-size: 11px; color: var(--text-sub); display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.3s; }
.sync-status i { color: #06b6d4; }

/* Spinner for Loading */
.loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.9); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spinner-box { width: 60px; height: 60px; position: relative; margin-bottom: 20px; }
.configure-border-1, .configure-border-2 { width: 100%; height: 100%; position: absolute; top: 0; border: 3px solid #06b6d4; border-radius: 50%; animation: spin 3s infinite linear; }
.configure-border-2 { border-color: #3b82f6; transform: rotate(45deg); animation: spin-rev 3s infinite linear; }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes spin-rev { 0% { transform: rotate(45deg); } 100% { transform: rotate(-315deg); } }