:root {
    --bg-app: #050505;
    --panel-bg: #111111;
    --panel-border: #333333;
    --text-primary: #ffffff;
    --text-muted: #888888;
    --accent-color: #00E5FF;
    --accent-hover: #00B8CC;
    --solution-color: #FFD60A;
    --danger-color: #FF2D55;
    --font-ui: 'Inter', sans-serif;
    --font-tech: 'Chakra Petch', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

body {
    margin: 0; padding: 0;
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-tech);
    height: 100vh; height: 100dvh;
    overflow: hidden;
}

/* --- 全局網格佈局 (Desktop) --- */
.app-grid {
    display: grid;
    grid-template-columns: 320px 1fr; /* 左側固定，右側自適應 */
    grid-template-rows: 100%;
    height: 100%; width: 100%;
}

/* --- 左側控制面板 --- */
.panel-controls {
    background-color: var(--panel-bg);
    border-right: 1px solid var(--panel-border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
    overflow-y: auto;
}

.panel-header h2 {
    font-size: 24px; margin: 0;
    color: var(--accent-color);
}
.subtitle, .footer-note {
    font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
}
.control-section {
    display: flex; flex-direction: column; gap: 16px;
    padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.input-group label {
    display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.info-text {
    font-size: 13px; color: #ccc; line-height: 1.4;
    background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px;
}

/* 下拉選單優化 */
.select-wrapper { position: relative; }
.styled-select {
    width: 100%; background: #1a1a1a; border: 1px solid #444;
    color: #fff; padding: 10px; border-radius: 8px;
    font-family: var(--font-mono); font-size: 16px; /* 防止 iOS 縮放 */
    appearance: none;
}
.select-wrapper::after {
    content: "▼"; position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); color: #888; font-size: 10px; pointer-events: none;
}

/* 按鈕 */
.action-buttons { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.btn {
    height: 50px; border: none; border-radius: 8px;
    font-family: var(--font-tech); font-size: 16px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-calc { background: var(--accent-color); color: #000; box-shadow: 0 0 15px rgba(0,229,255,0.2); }
.btn-reset { background: #222; color: var(--danger-color); border: 1px solid #333; }

/* --- 右側主區域 --- */
.main-column {
    display: grid; grid-template-rows: auto 1fr;
    height: 100%; overflow: hidden;
}

/* 公式區 */
.panel-solution {
    background: #0d0d0d; border-bottom: 1px solid var(--panel-border);
    padding: 16px 24px; display: flex; flex-direction: column; justify-content: center;
    min-height: 15%;
}
.solution-header {
    font-family: var(--font-mono); color: var(--text-muted); font-size: 10px;
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.indicator-dot { width: 6px; height: 6px; background: var(--accent-color); border-radius: 50%; }

#solution-text {
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* 流體字體 */
    color: var(--solution-color); line-height: 1.2; word-break: break-all;
}
.formula-details {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; gap: 4px;
}
.detail-row { display: flex; font-size: 12px; gap: 8px; color: #888; font-family: var(--font-mono); }
.detail-row .value { color: #ccc; }

/* --- 3D 工作區 --- */
.panel-3d {
    background: #000; position: relative; padding: 16px;
    display: flex; flex-direction: column; overflow: hidden; height: 100%;
}
.workspace-wrapper {
    display: flex; flex: 1; gap: 16px; height: 100%; min-height: 0;
}
.workspace-split {
    flex: 1; background: #080808; border: 1px solid #222; border-radius: var(--radius);
    position: relative; display: flex; flex-direction: column; overflow: hidden;
}
.pane-label {
    position: absolute; top: 10px; left: 10px; font-size: 10px; color: #555;
    font-family: var(--font-mono); z-index: 5; pointer-events: none;
}

/* 左 Pane (Player) */
.left-pane { background: radial-gradient(circle at center, #151515 0%, #080808 100%); }
twisty-player { width: 100%; height: 100%; }

/* 右 Pane (Canvas) */
.right-pane { display: flex; flex-direction: column; }
#canvas-wrapper {
    flex: 1; width: 100%; position: relative;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 80%);
}

/* Canvas 內的視角控制 (移植自新UI) */
.rotate-controls {
    position: absolute; top: 16px; right: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 20;
}
.rot-row { display: flex; gap: 4px; }
.rot-btn {
    width: 32px; height: 32px; background: rgba(50,50,50,0.5);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: #fff;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
}
.rot-btn:active { background: var(--accent-color); color: #000; }
.spacer { width: 32px; visibility: hidden; }

/* 調色盤 */
.palette-container {
    padding: 12px; background: #111; border-top: 1px solid #333;
}
.palette-grid { display: flex; gap: 8px; justify-content: center; }
.color-swatch {
    flex: 1; height: 40px; border-radius: 6px; cursor: pointer;
    border: 2px solid transparent; transition: 0.2s; max-width: 80px;
}
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 10px var(--accent-color); transform: scale(1.1); }

/* TAB (Mobile Only) */
.mobile-tabs { display: none; }

/* --- [新增] 相機掃描樣式 (4x4 適配版) --- */
.camera-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000; z-index: 9999;
    display: flex; flex-direction: column; align-items: center;
}

.camera-header {
    width: 100%; padding: 20px; display: flex; justify-content: space-between;
    align-items: center; background: #111; border-bottom: 1px solid #333;
}

#face-indicator {
    color: #fff; font-size: 1.2rem; font-weight: bold; font-family: var(--font-tech);
}

.close-camera {
    background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; padding: 0 10px;
}

.camera-container {
    position: relative; width: 100%; flex: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: #000;
}

.video-wrapper {
    position: relative; width: 90vw; height: 90vw;
    max-width: 400px; max-height: 400px;
    overflow: hidden; border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#video {
    width: 100%; height: 100%; object-fit: cover; transform: scaleX(1);
}

#grid-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
}

.scan-message {
    margin-top: 20px; color: var(--accent-color);
    font-family: var(--font-mono); font-size: 14px; text-align: center; min-height: 20px;
}

#button-container {
    position: absolute; bottom: 30px; left: 0; width: 100%;
    display: flex; justify-content: center; gap: 20px; z-index: 20;
}

.confirm-btn, .retry-btn {
    padding: 10px 30px; border-radius: 20px; border: none;
    font-weight: bold; font-size: 16px; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.confirm-btn { background-color: var(--accent-color); color: #000; }
.retry-btn { background-color: #444; color: #fff; }

/* 懸浮按鈕 */
.float-scan-btn {
    display: flex; position: absolute; top: 30px; left: 20px;
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: #fff; font-size: 24px; align-items: center; justify-content: center;
    z-index: 100; cursor: pointer; transition: all 0.3s;
}
.float-scan-btn:active { transform: scale(0.95); }

/* [新增] 禁用選項樣式 */
.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #444;
}

.cb-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
    font-family: var(--font-mono);
}

.cb-label input[type="checkbox"] {
    accent-color: var(--accent-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@media (max-width: 900px) {
    /* 1. 外層容器：鎖定視窗高度，防止整個頁面捲動 */
    .app-grid {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh; /* 針對移動瀏覽器網址列優化 */
        width: 100vw;
        overflow: hidden;
    }

    /* 2. 主操作區：佔據剩餘空間 (3D 與 預覽) */
    .main-column {
        order: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0; /* 關鍵：允許 Flex 子項目縮小 */
        overflow: hidden;
    }

    /* 3. 公式區：顯示反向公式，並限制高度 */
    .panel-solution {
        flex-shrink: 0;
        padding: 10px 16px;
        z-index: 20;
        width: 100%;
        max-height: 25vh; 
        overflow-y: auto;
        border-bottom: 1px solid #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .solution-header { display: none; }
    
    /* 主公式文字縮小一點 */
    #solution-text {
        font-size: 1.3rem; 
        margin: 0;
        text-align: left;
        line-height: 1.3;
        word-break: break-all;
    }

    /* 顯示詳細資訊 (反向公式) */
    .formula-details { 
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        margin-top: 8px;
        padding-top: 6px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    /* 詳細資訊改為橫向排列，節省垂直空間 */
    .detail-row {
        flex-direction: row;
        align-items: center;
        width: 100%;
        font-size: 11px;
    }
    
    .detail-row .label {
        color: #888;
        margin-right: 6px;
        white-space: nowrap;
    }
    
    .detail-row .value {
        color: #ccc;
        font-family: var(--font-mono);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 4. TAB 分頁系統 */
    .mobile-tabs {
        display: flex;
        flex-shrink: 0;
        width: 100%;
        background: #111;
        border-bottom: 1px solid #333;
        z-index: 30;
    }
    
    .tab-btn {
        flex: 1;
        padding: 8px 0;
        background: none;
        border: none;
        color: #666;
        border-bottom: 2px solid transparent;
        font-size: 13px;
        font-family: var(--font-tech);
        transition: 0.2s;
    }
    .tab-btn.active {
        color: var(--accent-color);
        border-bottom-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.05);
    }

    /* 5. 3D 工作區：自動縮放 */
    .panel-3d {
        flex: 1;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: #000;
        overflow: hidden;
    }
    
    .viewport-header, .pane-label { display: none; }

    .workspace-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        min-height: 0;
    }

    .workspace-split {
        display: none !important;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
    }

    .workspace-split.active {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .right-pane { 
        position: relative;
        overflow: hidden;
    }
    
    #canvas-wrapper {
        flex: 1;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, #1a1a1a 0%, #000 90%);
        overflow: hidden;
        position: relative;
    }

    .palette-container {
        flex-shrink: 0;
        padding: 6px;
        background: rgba(17,17,17,0.95);
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .palette-container label { display: none; }
    .color-swatch { height: 32px; }

    /* 6. 底部控制面板 (結構重構以實現固定按鈕) */
    .panel-controls {
        order: 2;
        flex-shrink: 0;
        height: 45vh; /* 固定高度，確保不佔滿全螢幕 */
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: var(--panel-bg);
        border-top: 1px solid var(--panel-border);
        border-right: none;
        width: 100%;
        
        /* 使用 Flex column 佈局來控制內部捲動 */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 禁止整個面板捲動 */
    }

    .panel-header, .subtitle, .footer-note { display: none; }

    /* 隱藏說明文字群組，這讓 Target 成為第一個可見元素 */
    .input-group:has(.info-text) { display: none; }
    .info-text { display: none !important; }

    /* 中間捲動區：包含 Target 與 Checkboxes */
    .control-section {
        flex: 1; /* 佔據剩餘空間 */
        overflow-y: auto; /* 只有這個區域可以捲動 */
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 8px;
        margin: 0;
        border: none;
    }

    /* 目標設定 (Target) 固定在捲動區頂部 */
    /* 注意：使用 :has 來選取包含 target select 的 input-group */
    .input-group:has(#target-face) {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: var(--panel-bg); /* 確保背景不透明，遮擋下方內容 */
        padding-bottom: 10px;
        border-bottom: 1px solid #333;
        margin-bottom: 4px;
    }
    
    .input-group { 
        width: 100%;
        flex: none; /* 防止被壓縮 */
    }

    /* 7.1 強制顯示標題 */
    .input-group > label {
        display: block !important;
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
        font-weight: bold;
    }

    /* 7.2 勾選框容器：2x2 格狀佈局 */
    .checkbox-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        background: transparent;
        padding: 0;
        border: none;
        margin-top: 4px;
    }

    /* 7.3 單個勾選項目：按鈕樣式 */
    .cb-label {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background-color: #1a1a1a;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 10px 4px;
        color: #888;
        font-size: 13px;
        font-family: var(--font-mono);
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
    }

    /* 7.4 選中狀態高亮 */
    .cb-label:has(input:checked) {
        background-color: rgba(0, 229, 255, 0.15);
        border-color: var(--accent-color);
        color: #fff;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
    }

    .cb-label input[type="checkbox"] {
        accent-color: var(--accent-color);
        width: 14px;
        height: 14px;
        margin: 0;
        cursor: pointer;
    }
    
    .input-group div[style*="font-size:10px"] {
        font-size: 10px !important;
        margin-top: 4px;
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 8. 底部主要按鈕 (固定顯示) */
    .action-buttons {
        flex-shrink: 0; /* 禁止縮小，確保永遠可見 */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid #333;
        background-color: var(--panel-bg);
        z-index: 15;
    }

    .btn {
        height: 42px;
        font-size: 13px;
        margin: 0;
    }
}