:root { 
            --accent: #0d6efd; --danger: #dc3545; --success: #198754; --dark: #212529; --warning: #ffc107;
            --text-color: #0d6efd;  --img-color:  #198754;  --card-color: #f59e0b;
            --cont-color: #dc3545;  --btn-color:  #fd7e14;  --hr-color:   #6c757d;
            --space-color:#adb5bd;  --media-color:#6f42c1;
        }
                /* 🚀 基礎配置：僅限編輯器外殼 (Editor Shell) */
        body.editor-shell, html.editor-shell { 
            margin: 0; padding: 0; height: 100vh; width: 100vw; 
            overflow: hidden !important; 
            background-color: #1a1a1a; 
            font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
            display: flex;
            flex-direction: column;
        }
        
        /* 🚀 頁面內容基本重設 (相容性) */
        body:not(.editor-shell) { margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; }
        
        /* 🚀 旗艦級工具列 (Glassmorphism) */
        .toolbar { 
            flex: 0 0 64px;
            z-index: 10000 !important;
            background: #333333; 
            border-bottom: 1px solid rgba(255,255,255,0.1);
            color: white; 
            display: flex; 
            align-items: center; 
            padding: 0 20px; 
            gap: 12px; 
            position: relative; 
            box-shadow: 0 4px 30px rgba(0,0,0,0.5);
            overflow: visible !important;
        }

        /* 🚀 V17.97: 調整層級以支援多層 Modal 疊加 */
        .modal { z-index: 11000; }
        .modal-backdrop { z-index: 10990; }
        .modal.show { z-index: 11050; }
        .modal-backdrop.show { z-index: 11045; }
        #instruction-hint { z-index: 10000 !important; }
        #loading-overlay { z-index: 10001 !important; }
        .filename-bar { display: none; }
        .toolbar-secondary {
            flex: 0 0 48px;
            z-index: 10000 !important;
            background: #444444; 
            border-bottom: 1px solid rgba(255,255,255,0.05);
            display: none; /* 由 JS 切換 */
            align-items: center;
            padding: 0 20px;
            gap: 8px;
            position: relative;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
            overflow: visible !important;
        }
        .toolbar-secondary.active { display: flex; }
        .quick-comp-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
            color: #eee;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .quick-comp-btn:hover { background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.3); }
        .quick-comp-btn i { font-style: normal; }
        .editor-container { flex: 1; width: 100%; display: flex; background: #222; position: relative; overflow: hidden; }

        iframe { width: 100%; height: 100%; border: none; background: white; border-radius: 0; }

        /* 核心工具組樣式 */
        #formatting-toolbar { display: flex; align-items: center; gap: 4px; opacity: 0.4; pointer-events: none; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); filter: grayscale(1); overflow: visible !important; }
        #formatting-toolbar.active { opacity: 1; pointer-events: auto; filter: grayscale(0); }
        
        .dropdown-menu { border-radius: 16px !important; margin-top: 8px !important; box-shadow: 0 15px 45px rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.1) !important; overflow: hidden; border: none !important; }
        .dropdown-item { transition: 0.2s; padding: 10px 20px; }
        .dropdown-item:hover { background: var(--accent) !important; color: white !important; transform: translateX(5px); }
        
        /* 模式切換按鈕項 (V11.7) */
        #mode-toggle-group .btn-sm { font-size: 9px; min-width: 42px; height: 18px; line-height: 18px; border: none; border-radius: 4px !important; }
        .mode-btn-web { background: #004085 !important; opacity: 0.6; }
        .mode-btn-code { background: #721c24 !important; opacity: 0.6; }
        .mode-btn-web:hover, .mode-btn-code:hover { opacity: 0.8 !important; }
        .mode-btn-web.active, .mode-btn-code.active { opacity: 1 !important; box-shadow: 0 0 10px rgba(255,255,255,0.2); outline: 1px solid rgba(255,255,255,0.8); }

        #instruction-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(13, 110, 253, 0.95); backdrop-filter: blur(10px); color: white; padding: 15px 40px; border-radius: 100px; font-size: 15px; font-weight: 600; z-index: 9999; display: none; box-shadow: 0 20px 40px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); animation: fadeInUp 0.4s ease; }
        @keyframes fadeInUp { from { opacity:0; transform: translate(-50%, 20px); } to { opacity:1; transform: translate(-50%, 0); } }
        
        .loading-overlay { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 5000; display: none; }

        /* 🚀 原始碼同步高亮 */
        .ed-sync-highlight { 
            background: rgba(255, 235, 59, 0.4) !important; 
            border-top: 1px dashed rgba(0,0,0,0.2); 
            border-bottom: 1px dashed rgba(0,0,0,0.2); 
            animation: ed-pulse 1s infinite alternate;
        }
        @keyframes ed-pulse { from { background: rgba(255, 235, 59, 0.2); } to { background: rgba(255, 235, 59, 0.6); } }
        
        .handle-group { position: absolute; display: flex; gap: 6px; z-index: 1000; }
        .h-btn { width: 34px; height: 34px; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; border: 2px solid white; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: 0.2s; }
        .h-btn:hover { transform: translateY(-2px); filter: brightness(1.2); }

        /* 結束確認對話框 */
        #exit-dialog { position: fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.65); z-index:99999; display:flex; align-items:center; justify-content:center; }
        #exit-dialog .ed-panel { background:#fff; border-radius:24px; padding:40px; max-width:400px; width:90%; box-shadow:0 30px 70px rgba(0,0,0,0.5); text-align:center; transform: scale(1); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        #exit-dialog .ed-icon { font-size:48px; margin-bottom:15px; }
        #exit-dialog h5 { font-weight:800; margin-bottom:10px; font-size: 20px; }
        #exit-dialog p { color:#666; font-size:15px; margin-bottom:30px; }
        #exit-dialog .ed-btns { display:flex; gap:12px; justify-content:center; }
        #exit-dialog .ed-btns button { border:none; border-radius:12px; padding:12px 24px; font-weight:700; cursor:pointer; font-size:15px; transition:.2s; }
        .ed-btn-save  { background:var(--success); color:#fff; }
        .ed-btn-nosave{ background:var(--danger); color:#fff; }
        .ed-btn-back  { background:var(--hr-color); color:#fff; }

        /* Source Code Editor Styles */
        #source-editor-wrapper {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 5;
            display: none;
            background: #282a36;
        }
        .CodeMirror {
            height: 100% !important;
            font-family: 'Fira Code', 'Consolas', monospace;
            font-size: 14px;
        }
        
/* 📄 CodeMirror 搜尋對話框美化 */
.CodeMirror-dialog {
    background: #282a36 !important;
    color: #f8f8f2 !important;
    padding: 12px 20px !important;
    border-bottom: 2px solid #6272a4 !important;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.CodeMirror-dialog input {
    background: #44475a !important;
    border: 1px solid #6272a4 !important;
    color: #50fa7b !important;
    padding: 4px 10px !important;
    border-radius: 6px;
    outline: none;
    margin: 0 8px;
}
.CodeMirror-dialog button {
    background: #6272a4 !important;
    color: white !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: 0.2s;
}
.CodeMirror-dialog button:hover { background: #ff79c6 !important; }

.code-mode-hint {
    position: absolute;
    bottom: 25px;
    right: 35px;
    background: rgba(40, 42, 54, 0.9);
    backdrop-filter: blur(8px);
    color: #bd93f9;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 12px;
    border: 1px solid rgba(98, 114, 164, 0.5);
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    display: flex;
    gap: 15px;
}
.code-mode-hint b { color: #50fa7b; }

/*  容器空狀態引導 */
[data-ed-type="cont"]:empty::before {
    content: "可拖入元件至此區";
    display: block;
    padding: 30px;
    text-align: center;
    color: rgba(0,0,0,0.2);
    font-size: 13px;
    font-weight: 600;
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 12px;
    pointer-events: none;
    margin: 10px;
}

/* 🌐 全站導航 (App-Shell) 樣式 */
.site-nav {
    position: relative;
    width: 100%;
    height: 60px;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 1000;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
}
.site-nav.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.nav-brand { font-size: 1.25rem; font-weight: 800; color: #333; cursor: default; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; }
.nav-links a { text-decoration: none; color: #555; font-weight: 600; font-size: 0.95rem; transition: 0.2s; }
.nav-links a:hover { color: var(--accent); }

/* 電機版抽屜 */
.nav-mobile-trigger { display: none; width: 30px; height: 20px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.nav-mobile-trigger span { display: block; height: 2px; width: 100%; background: #333; border-radius: 10px; transition: 0.3s; }

.nav-drawer { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: white; z-index: 2001; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -10px 0 30px rgba(0,0,0,0.1); padding: 40px 25px; }
.nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; pointer-events: none; transition: 0.3s; }
body.drawer-open .nav-drawer { right: 0; }
body.drawer-open .nav-overlay { opacity: 1; pointer-events: auto; }

/* 🛠️ 選單管理員 Modal 內部樣式 */
.menu-mgr-list { list-style: none; padding: 0; margin: 20px 0; }
.menu-mgr-item { 
    background: #f8f9fa; 
    border: 1px solid #eee; 
    padding: 12px 15px; 
    border-radius: 12px; 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    cursor: grab;
    transition: 0.2s;
}
.menu-mgr-item:hover { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.menu-mgr-list { max-height: 400px; overflow-y: auto; padding: 10px 0; }
.menu-mgr-item { display: flex; align-items: center; gap: 10px; background: #f8f9fa; padding: 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #eee; }
.menu-mgr-item:hover { border-color: #0d6efd; }
.menu-mgr-handle { cursor: grab; color: #ccc; font-size: 18px; }
.menu-mgr-del { cursor: pointer; color: #dc3545; opacity: 0.6; padding: 5px; }
.menu-mgr-del:hover { opacity: 1; }
.menu-mgr-sub-container { margin-left: 40px; border-left: 2px dashed #ddd; padding-left: 10px; margin-bottom: 15px; }
.btn-picker { border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.menu-mgr-add-sub { font-size: 11px; padding: 2px 8px; margin-top: -5px; margin-bottom: 10px; margin-left: 40px; }
.picker-item { cursor: pointer; transition: 0.2s; border-radius: 8px; margin: 4px 8px; }
.picker-item:hover { background: #e9ecef; transform: translateX(5px); }

        /* ➕ 新增元件面板標籤美化 */
        #addTab .nav-link { background: #dcdde1 !important; color: #7f8c8d !important; transition: 0.3s; }
        #addTab .nav-link:hover { background: #d1d2d6 !important; color: #2c3e50 !important; }
        #addTab .nav-link.active { background: #ffffff !important; color: #c0392b !important; border-bottom: 2px solid #c0392b !important; } /* 深紅色 */

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-mobile-trigger { display: flex; }
}

        /* 🔗 連結選取狀態 (深藍色) */
        .btn-link-active {
            background-color: #003399 !important;
            color: white !important;
            box-shadow: 0 0 10px rgba(0, 51, 153, 0.5);
            border-color: #0044bb !important;
        }

/* 📱 手機/平板環境適應性優化 (V13.85) */
@media (max-width: 991px) {
    .toolbar {
        overflow-x: auto !important;
        overflow-y: visible !important;
        justify-content: flex-start !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 15px !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* 順滑捲動 */
        scrollbar-width: none; /* 隱藏捲軸保持美觀 */
    }
    .toolbar::-webkit-scrollbar { display: none; }
    
    .toolbar > div {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 文字工具列在手機板需取消置中，改為緊隨左側 */
    #formatting-toolbar {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 次要工具列也同步支援橫移 */
    .toolbar-secondary {
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .toolbar-secondary::-webkit-scrollbar { display: none; }
    .toolbar-secondary > div, .toolbar-secondary > button { flex-shrink: 0 !important; }
}

/* 💫 輪播圖模組專用樣式 (V14.44) */
.ed-carousel-module {
    max-width: 100% !important;
}
.ed-carousel-module .bx-controls .bx-prev:hover,
.ed-carousel-module .bx-controls .bx-next:hover {
    background: rgba(0,0,0,0.6) !important;
    transform: scale(1.1);
    transition: 0.2s;
}

/* 🚀 編輯器內強制阻斷輪播圖連結與按鈕事件，防止跳轉 */
.ed-carousel-module a,
.ed-carousel-module .bx-controls div {
    pointer-events: auto !important; /* 允許點擊以觸發選取，但我們會在 JS 中攔截跳轉 */
}

/* 模擬自動播放特效 (選取時提示) */
.ed-carousel-module[data-carousel-auto="1"].ed-selected::after {
    content: "🔄 自動播放中 (編輯器內為靜態預覽)";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(25, 135, 84, 0.8);
    color: white;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    z-index: 50;
    pointer-events: none;
}

/* 📢 跑馬燈模組專用樣式 (V14.60) */
.ed-marquee-module .focus_block { overflow: hidden; }
.ed-marquee-module .focus_slider { width: 100%; transition: transform 0.6s ease; }
.ed-marquee-module .item { height: 100%; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 0; }

.marquee-mgr-list { margin-top: 5px; }
.marquee-mgr-list .p-2:hover { border-color: #dc3545 !important; }

/* 🖼️ 照片牆模組專用樣式 (V15.10) */
.ed-gallery-shell {
    transition: all 0.3s ease;
}
.ed-gallery-item {
    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: grab;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}
.ed-gallery-item:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    z-index: 2;
}
/* 照片牆懸停縮放特效 */
.gallery-img-hover { 
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important; 
}
.ed-gallery-item:hover .gallery-img-hover { 
    transform: scale(1.1) !important; 
}

/* 顯示空佔位文字 */
.ed-grid-placeholder {
    pointer-events: none;
    user-select: none;
}
/* 🚀 物件屬性編輯 Modal 優化 (V15.75) */
#modalAdv .modal-dialog { max-width: 560px; } /* 🚀 V17.94: 縮小選單寬度至約 2/3 */
#modalAdv .modal-body { max-height: 80vh; overflow-y: auto; } /* 增加捲軸支援 */

.settings-group {
    border: 2px solid #dc3545 !important; /* 強制紅色外框 */
    margin-bottom: 15px !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
    transition: 0.3s;
}
.settings-group:hover { box-shadow: 0 6px 18px rgba(220, 53, 69, 0.2); }
.settings-group h6 { 
    background: #dc3545; 
    color: white; 
    padding: 6px 12px; 
    border-radius: 4px; 
    margin: -16px -16px 12px -16px; 
    font-size: 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 底部按鈕置中 */
#modalAdv .modal-footer {
    justify-content: center !important;
    gap: 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}
#modalAdv .modal-footer .btn {
    padding: 8px 30px;
    border-radius: 50px;
    font-weight: bold;
}
/* 🚀 V18.52: 全域頁首/頁尾 (Global Layout) 識別樣式 - 僅在編輯器模式下顯示 */
body.ed-is-editing #site-header-core, 
body.ed-is-editing #site-footer-core {
    position: relative;
    border: 2px dashed #6f42c1 !important; /* 紫色虛線 */
    margin: 10px 0;
    padding: 5px;
    transition: 0.3s;
}
body.ed-is-editing #site-header-core::after, 
body.ed-is-editing #site-footer-core::after {
    position: absolute;
    top: -10px;
    left: 10px;
    background: #6f42c1;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 1000;
    pointer-events: none;
}
body.ed-is-editing #site-header-core::after { content: "🌐 全域頁首 (Global Header)"; }
body.ed-is-editing #site-footer-core::after { content: "🌐 全域頁尾 (Global Footer)"; }

body.ed-is-editing #site-header-core:hover, 
body.ed-is-editing #site-footer-core:hover {
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.2);
    border-style: solid !important;
}

/* 🚀 V18.57: 時光區塊 (Story) 識別與收合樣式 - 僅在編輯器模式下顯示 */
body.ed-is-editing .antigravity-story-injector {
    position: relative;
    border: 2px dashed #ff00ff;

    margin: 0; 
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 20px;
}

body.ed-is-editing.hide-stories .antigravity-story-injector {
    height: 30px !important;
    margin-top: 20px !important; 
    margin-bottom: 10px !important;
    overflow: hidden !important;
    background: rgba(255, 0, 255, 0.05) !important;
}
body.ed-is-editing.hide-stories .antigravity-story-injector > *:not(.story-badge) {
    display: none !important;
}
body.ed-is-editing.hide-stories .antigravity-story-injector::after {
    content: "🕒 時光內容已收合 (編輯佔位模式)";
    display: block;
    padding: 20px;
    text-align: center;
    color: #ff00ff;
    font-weight: bold;
    font-size: 14px;
    background: rgba(255, 0, 255, 0.02);
}


/* 🕒 時光按鈕色：V20.47 優化 - 改為黃色外框風格與加大字級 */
.btn-story { 
    background-color: transparent !important; 
    color: #fbbf24 !important; 
    border: 1px solid #fbbf24 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    transition: all 0.2s ease;
    border-radius: 6px !important;
}
.btn-story:hover { 
    background-color: rgba(251, 191, 36, 0.1) !important; 
    border-color: #fcd34d !important;
    color: #fcd34d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}
.btn-story:focus, .btn-story.active { 
    background-color: #fbbf24 !important; 
    color: #444 !important; /* 黃底黑字更清晰 */
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5) !important;
    border: 1px solid #fcd34d !important;
}

/* 🚀 下拉選單風格統一校正 (比照網站管理) */
.toolbar-secondary .dropdown-menu {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.5) !important;
    z-index: 15000 !important;
    background: #ffffff !important;
}
.toolbar-secondary .dropdown-item {
    color: #333 !important;
    font-weight: 500;
}
.toolbar-secondary .dropdown-item:hover {
    background: #f8f9fa !important;
    color: #0d6efd !important;
}

/* 🕒 時光區塊管理員樣式 (V20.76) */
.story-item { 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    border-left: 3px solid transparent !important; 
    margin-bottom: 2px !important;
}
.story-item:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
.story-item.active { 
    background: #f0f7ff !important; 
    border-color: #0d6efd !important; 
    border-width: 2px !important;
    box-shadow: 0 4px 15px rgba(13,110,253,0.15) !important;
    z-index: 10;
    position: relative;
}
.story-item.active::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #0d6efd; border-radius: 2px 0 0 2px;
}
.story-item.active .small.fw-bold { color: #0d6efd; font-size: 13px !important; }
.story-item.active .story-thumb { border-color: #0d6efd !important; opacity: 1; }