/* --- style.css (V2.0 Unified) --- */

/* 1. 基礎佈局調整 (配合 System Bar) */
body { 
    background: linear-gradient(135deg, #141129, #2e1065); 
    color: #e4e4e7; 
    font-family: 'Inter', system-ui, sans-serif; 
    overflow: hidden; 
    height: 100vh; 
    padding-top: 40px; /* ★ 關鍵：預留頂部 System Bar 空間 */
}

.main-layout { 
    display: flex; 
    height: 100%; /* 因為 body 已經 padding-top，這裡 height 100% 會剛好填滿剩餘空間 */
    position: relative;
    z-index: 10;
}

/* 2. System Bar (頂部導航列) - 新增 */
.system-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 40px;
    background: linear-gradient(135deg, #1e1b4b, #2e1065); border-bottom: 1px solid #3b2f6b;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 9999; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.sb-brand { font-weight: 900; color: #fff; font-size: 14px; letter-spacing: 0.5px; display: flex; align-items: center; }
.sb-ver { font-size: 10px; background: #251d47; padding: 2px 6px; border-radius: 4px; color: #c4b5fd; margin-left: 8px; border: 1px solid #433b77; }

.sb-center { display: flex; height: 100%; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); }
.sb-tab {
    height: 100%; display: flex; align-items: center; padding: 0 24px;
    font-size: 12px; font-weight: bold; color: #c7c7d1; cursor: pointer;
    border-bottom: 2px solid transparent; transition: all 0.25s;
    user-select: none;
}
.sb-tab:hover { color: #fff; background: #1b1838; }
.sb-tab.active { color: #fff; border-bottom-color: #8b5cf6; background: #22184d; box-shadow: inset 0 -2px 0 #8b5cf6; }

.sb-right { display: flex; gap: 10px; align-items: center; }
.sb-btn-icon { color: #a1a1aa; cursor: pointer; padding: 4px; border-radius: 4px; transition: 0.2s; }
.sb-btn-icon:hover { color: #fff; background: #27272a; }

/* 3. 預覽區 (Preview Side) */
.preview-side { 
    flex: 1; overflow: hidden; background: #171334; display: flex; flex-direction: column; position: relative; 
    background-image: radial-gradient(#2a2457 1px, transparent 1px); background-size: 24px 24px; 
}
.preview-toolbar { padding: 12px; display: flex; justify-content: center; gap: 10px; background: rgba(0,0,0,0.2); backdrop-filter: blur(5px); border-bottom: 1px solid #27272a; z-index: 20; }
.preview-scroll-area { flex: 1; overflow-y: auto !important;  padding: 40px 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }

#previewContainer { 
    background: white; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 0 0 0 1px #27272a, 0 20px 60px -10px rgba(0,0,0,0.6); 
    border-radius: 4px; 
    overflow: hidden; 
    margin-bottom: 40px; 
    transform-origin: top center;
    width: 100%;
    
    /* ▼ 修改這一行 ▼ */
    max-width: 1200px; 
    
    height: 100%;
}

#previewIframe { width: 100%; height: 100%; border: none; background: #fff; }

/* ▼ 修改這一行 ▼ */
.mode-desktop-wrap { width: 100%; max-width: 1200px; height: 90%; }

#previewContainer.mode-mobile-wrap { width: 640px !important; height: auto !important;min-height: 1000px; /* 給一個最小高度讓它像手機 */; border-radius: 24px !important; border: 6px solid #3f3f46 !important; box-shadow: 0 0 0 2px #18181b, 0 30px 80px rgba(0,0,0,0.8) !important; }
.scale-two-thirds { transform: scale(0.6667); margin-bottom: -300px !important; }

/* 4. 控制面板 (Control Wrapper) */
.control-wrapper { 
    width: 500px; display: flex; flex-direction: column; 
    background: #0d0b1f; border-left: 1px solid #3b2f6b; 
    box-shadow: -10px 0 30px rgba(0,0,0,0.5); z-index: 30; 
}
.control-header { padding: 16px 20px; border-bottom: 1px solid #3b2f6b; background: #140f2c; }
.control-content { flex: 1; overflow-y: auto; padding: 20px; }
.control-footer { padding: 16px 20px; border-top: 1px solid #3b2f6b; background: #140f2c; }
.control-content::-webkit-scrollbar { width: 6px; }
.control-content::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }

/* 5. 卡片群組 (Card Groups) */
.card-group { background: #1a1840; border: 1px solid #3b2f6b; border-radius: 8px; margin-bottom: 16px; overflow: hidden; transition: border-color 0.2s; border-left: 4px solid #3b2f6b; }
.card-group.hover-yellow:hover { border-left-color: #fbbf24; }
.card-group.hover-green:hover  { border-left-color: #10b981; }
.card-group.hover-purple:hover { border-left-color: #8b5cf6; }
.card-group.hover-blue:hover   { border-left-color: #7dd3fc; }
.card-group.hover-orange:hover { border-left-color: #f97316; }

.group-header { 
    padding: 14px 16px; background: #1f1b47; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid transparent; transition: background 0.2s;
}
.group-header:hover { background: #251d57; }
.group-header.expanded { border-bottom-color: #3b2f6b; background: #22184d; }
.header-title { font-size: 15px; font-weight: 700; color: #f4f4f5; display: flex; align-items: center; gap: 8px; }
.header-icon { color: #a1a1aa; transition: transform 0.3s; }
.header-icon.rotate { transform: rotate(180deg); }

.group-content { padding: 16px; display: none; background: #160f34; }
.group-content.show { display: block; animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* 6. 輸入框與按鈕 (Inputs & Buttons) */
.section-label { font-size: 13px; font-weight: 600; color: #a1a1aa; margin-bottom: 8px; display: block; }
.input-text { background: #140f2c; border: 1px solid #3b2f6b; border-radius: 6px; padding: 10px 12px; width: 100%; font-size: 14px; color: #e4e4e7; outline: none; transition: 0.2s; }
.input-green:focus { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15); background: #121215; }
.input-purple:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); background: #1b1838; }
.input-blue:focus { border-color: #7dd3fc; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.2); background: #1b1838; }
.input-orange:focus { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15); background: #121215; }

.btn-toggle { background: #27272a; color: #a1a1aa; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; transition: 0.2s; display: flex; align-items: center; gap: 6px; cursor: pointer; border: none; }
.btn-toggle.active { background: #e4e4e7; color: #09090b; }
.btn-action { transition: transform 0.1s; cursor: pointer; }
.btn-action:active { transform: scale(0.96); }

/* 7. POP 專用：KV 素材庫 (KV Library) - 預先準備 */
.kv-lib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.kv-lib-item { 
    aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; 
    border: 2px solid transparent; cursor: pointer; transition: 0.2s; position: relative;
}
.kv-lib-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: 0.2s; }
.kv-lib-item:hover { border-color: #8b5cf6; }
.kv-lib-item:hover img { opacity: 1; }
.kv-lib-label { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); color: #fff; font-size: 9px; text-align: center; padding: 2px 0; }

/* 8. 色彩選擇器 UI */
#colorPresets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.color-dot { width: 100%; height: 32px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: transform 0.1s; }
.color-dot:hover { transform: scale(1.05); border-color: white; }

.color-btn-row { display: flex; gap: 10px; width: 100%; }
.color-btn-ui { flex: 1; background: #231c4a; border: 1px solid #3b2f6b; border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; }
.color-btn-ui:hover { background: #2a235a; border-color: #4a3b86; }
.color-dot-preview { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.color-btn-label { font-size: 12px; color: #e4e4e7; font-weight: bold; white-space: nowrap; }
.color-input-hidden { position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; }

/* POP 同步按鈕樣式 */
.sync-btn {
    font-size: 11px; color: #8b5cf6; background: rgba(139, 92, 246, 0.12); 
    padding: 2px 8px; border-radius: 4px; cursor: pointer; 
    border: 1px solid rgba(139, 92, 246, 0.3); transition: 0.2s;
    display: inline-flex; align-items: center; gap: 4px;
}
.sync-btn:hover { background: rgba(139, 92, 246, 0.22); border-color: #8b5cf6; }

/* 下載按鈕 */
.magic-download-btn {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    border: 1px solid rgba(255,255,255,0.2);
    color: white; font-weight: bold; font-size: 14px;
    padding: 12px; border-radius: 12px; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden; cursor: pointer;
}
.magic-download-btn:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 25px rgba(217, 70, 239, 0.5); border-color: rgba(255,255,255,0.4); filter: brightness(1.1); }

/* 平台按鈕 */
.platform-btn { 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #231c4a; border: 2px solid transparent; border-radius: 8px; 
    padding: 12px; cursor: pointer; transition: 0.2s; color: #c7c7d1; font-weight: bold;
    font-size: 13px;
}
.platform-btn:hover { background: #2a235a; color: #fff; }
.platform-btn.active[id="btn-shopping"] { background: #2e1065; border-color: #8b5cf6; color: #fff; }
.platform-btn.active[id="btn-auction"] { background: #451a03; border-color: #fbbf24; color: #fff; }
.platform-btn img { height: 24px; margin-bottom: 8px; opacity: 0.8; }
.platform-btn.active img { opacity: 1; }

/* 圖片與區塊管理 */
.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.img-slot { position: relative; border: 1px dashed #3b2f6b; border-radius: 8px; aspect-ratio: 16/9; background: #171334; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: 0.2s; }
.img-slot:hover { border-color: #8b5cf6; background: #1b1838; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.del-btn { position: absolute; top: 2px; right: 2px; background: rgba(220, 38, 38, 0.9); color: white; width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transition: 0.2s; z-index: 5; }
.img-slot:hover .del-btn { opacity: 1; }
.slot-actions { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; gap: 6px; justify-content: center; opacity: 0; transition: 0.2s; z-index: 6; }
.img-slot:hover .slot-actions, .bg-slot-container:hover .slot-actions { opacity: 1; }
.slot-btn { font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid #3b2f6b; background: rgba(0,0,0,0.5); color: #c7c7d1; cursor: pointer; }
.slot-btn:hover { border-color: #8b5cf6; color: #fff; background: rgba(27,24,56,0.8); }

/* 範圍滑桿 */
.range-slider { -webkit-appearance: none; width: 100%; height: 4px; background: #27272a; border-radius: 2px; outline: none; }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #e4e4e7; cursor: pointer; border: 2px solid #000; box-shadow: 0 0 0 1px #52525b; transition: 0.1s; }

/* 背景上傳區 */
.bg-slot-container { height: 60px; position: relative; border: 1px dashed #3b2f6b; border-radius: 8px; background: #171334; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.bg-slot-container:hover { border-color: #8b5cf6; }
.bg-slot-container.has-img .del-btn { opacity: 1; }
.bg-preview { width: 100%; height: 100%; object-fit: cover; }

/* 圖紋網格 */
#patternGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.pat-btn { height: 40px; border-radius: 6px; background: #000; border: 1px solid #3b2f6b; cursor: pointer; position: relative; overflow: hidden; transition: 0.2s; }
.pat-btn.active { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5); }
.pat-preview { width: 100%; height: 100%; }

/* POP 專用：區塊列表 */
.block-item { background: #231c4a; border: 1px solid #3b2f6b; border-radius: 6px; margin-bottom: 8px; padding: 12px; display: flex; align-items: center; justify-content: space-between; transition: 0.2s; }
.block-item:hover { border-color: #71717a; }
.block-title { font-weight: bold; font-size: 13px; color: #fff; }
.block-actions { display: flex; gap: 4px; }
.mini-btn { padding: 4px 8px; border-radius: 4px; font-size: 11px; background: #1b1838; border: 1px solid #4a3b86; color: #c7c7d1; cursor: pointer; transition: 0.2s; }
.mini-btn:hover { color: #fff; border-color: #fff; }
.btn-edit:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.btn-del:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* POP 專用：全螢幕編輯器 */
#editorModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; display: none; flex-direction: column; }
#editorModal.active { display: flex; }
.tox-tinymce-aux { z-index: 100001 !important; } /* 修復 TinyMCE 彈窗被遮擋問題 (高於 Modal 10000) */

.editor-header { height: 70px; background: #1f1b47; border-bottom: 1px solid #3b2f6b; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; }
.editor-body { flex: 1; padding: 20px; overflow: hidden; display: flex; justify-content: center; background: #141129; }
.editor-container { width: 100%; max-width: 1300px; background: #fff; border-radius: 8px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.editor-input { background: #f4f4f5; border: 1px solid #d4d4d8; color: #18181b; padding: 8px 12px; border-radius: 6px; outline: none; transition: 0.2s; font-size: 14px; font-weight: bold; }
.editor-input:focus { border-color: #6366f1; background: #fff; }
.editor-label { color: #a1a1aa; font-size: 12px; font-weight: 600; margin-right: 6px; }

/* 表格模式樣式 - 針對個別表格 */
table.table-scroll { 
    display: block; 
    overflow-x: auto; 
    width: 100%; 
    -webkit-overflow-scrolling: touch; 
}
table.table-fixed-width { 
    table-layout: fixed; 
    width: 100%; 
}
/* 默認表格樣式 */
.block-body table { margin-bottom: 1em; width: 100%; border-collapse: collapse; }

/* 手機版模式專用樣式 */
.img-preview-box { width: 100%; height: 100px; border: 1px dashed #3b2f6b; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; background: #171334; transition: 0.2s; }
.img-preview-box:hover { border-color: #10b981; }
.img-preview-box img { width: 100%; height: 100%; object-fit: contain; }
/* 排序與視覺化按鈕 */
.order-btn-visual { flex: 1; background: #27272a; border: 1px solid #3f3f46; padding: 10px 8px; border-radius: 6px; transition: 0.2s; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 50px; }
.order-btn-visual:hover { background: #3f3f46; border-color: #52525b; }
.order-btn-visual.active { background: #18181b; border-color: #10b981; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4); }
.vis-line { height: 3px; border-radius: 2px; width: 100%; }
.vl-title { background: #fbbf24; width: 80%; height: 5px; }
.vl-date { background: #4ade80; width: 50%; }
.vl-sub { background: #94a3b8; width: 65%; }