/**
 * ==========================================================================
 * 📁 editor.css
 * 檔案位置：/Users/yushan/webapps/yushan2026/base/static/base/css/editor.css
 * 

 * 📌 樣式架構索引地圖：
 * ┌─────────────────────────────┬──────────────────────────────────────────────┐
 * │ 樣式區段                    │ 行數位置與說明                               │
 * ├─────────────────────────────┼──────────────────────────────────────────────┤
 * │ 1. 亮色 / 暗色 色彩變數     │ Line 20 ~ Line 60 (背景色、文字色、超連結等) │
 * │ 2. 編輯區 Body 基礎排版     │ Line 62 ~ Line 75 (內距 24px、字型、過渡動畫)│
 * │ 3. 標題與段落排版 (H1~H6, P)│ Line 77 ~ Line 120 (標準 margin, 1.5 行高)   │
 * │ 4. 表格 Table 完整樣式      │ Line 122 ~ Line 180 (圓角、框線、表頭等)     │
 * │ 5. 提示匡線樣式 (Boxes)     │ Line 182 ~ Line 270 (提示框、警告框、筆記框) │
 * │ 6. 區塊樣式 (Block Styles)  │ Line 272 ~ Line 340 (文字區、邊框區、自訂區) │
 * │ 7. 特色匡線樣式 (Special)   │ Line 342 ~ Line 430 (冠軍、引言、便籤、施工等│
 * │ 8. 文字標籤樣式 (Inline Tag)│ Line 432 ~ Line 470 (重點、警告、附註文字)   │
 * │ 9. 螢光筆與文字特殊樣式     │ Line 472 ~ Line 560 (螢光筆、KBD、劇透、彩虹)│
 * │ 10. 排版版面樣式 (Layouts)  │ Line 562 ~ Line 620 (雙欄、三欄、卡片、時間軸│
 * │ 11. 下拉選單所見即所得預覽  │ Line 622 ~ Line 900 (.tox-menu 下拉項目即時) │
 * └─────────────────────────────┴──────────────────────────────────────────────┘
 * ==========================================================================
 */

/* ==========================================================================
   1. 【亮色 / 暗色 色彩變數定義】
   ========================================================================== */

/* 🌙 預設 / 深色模式 (原本經典黑色 #222222) */
:root,
html.dark-mode {
    --bg-color: #222222;
    --text-color: #ffffff;
    --text-muted: #aaaaaa;
    --border-color: #444444;
    --link-color: #4691ff;
    --hover-bg: rgba(255, 255, 255, 0.08);

    /* 📊 表格色彩變數 */
    --table-border: #444444;
    --table-head-border: #007bff;
    --table-head-bg: rgba(0, 123, 255, 0.15);
    --table-stripe-bg: rgba(255, 255, 255, 0.03);
    --table-hover-outline: rgba(0, 136, 255, 0.25);
    --table-head-text: #ffffff;

    /* 💡 框線強調色彩 */
    --box-accent-highlight: #ffffff;
    --box-accent-warning: #ffc107;
    --box-accent-info: #0dcaf0;
    --box-accent-success: #28a745;
    --box-accent-error: #dc3545;
    --box-accent-thinking: #2196f3;
    --box-accent-tag: #6f42c1;
    --box-accent-note: #adb5bd;
    --box-bg-highlight: rgba(255, 255, 255, 0.12);
    --box-bg-warning: rgba(255, 193, 7, 0.15);
    --box-bg-info: rgba(13, 202, 240, 0.15);
    --box-bg-success: rgba(40, 167, 69, 0.15);
    --box-bg-error: rgba(220, 53, 69, 0.15);
    --box-bg-thinking: rgba(33, 150, 243, 0.15);
    --box-bg-tag: rgba(111, 66, 193, 0.15);
    --box-bg-note: rgba(128, 128, 128, 0.15);

    --code-bg: #1e1e1e;
    --code-header-bg: #2d2d2d;
    --code-text: #cccccc;
    --kbd-bg: #2d3748;
}

/* ☀️ 亮色模式 */
html.light-mode {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --text-muted: #666666;
    --border-color: #dddddd;
    --link-color: #007bff;
    --hover-bg: rgba(0, 0, 0, 0.04);

    /* 📊 表格色彩變數 (亮色模式：加深標題列藍調 #e0f2fe，層次鮮明) */
    --table-border: #cbd5e1;
    --table-head-border: #0284c7;
    --table-head-bg: #e0f2fe;
    --table-stripe-bg: #f8fafc;
    --table-hover-outline: rgba(2, 132, 199, 0.3);
    --table-head-text: #0f172a;


    /* 💡 框線強調色彩 */
    --box-accent-highlight: #333333;
    --box-accent-warning: #d97706;
    --box-accent-info: #0284c7;
    --box-accent-success: #16a34a;
    --box-accent-error: #dc2626;
    --box-accent-thinking: #2563eb;
    --box-accent-tag: #7c3aed;
    --box-accent-note: #64748b;
    --box-bg-highlight: rgba(0, 0, 0, 0.05);
    --box-bg-warning: rgba(245, 158, 11, 0.1);
    --box-bg-info: rgba(14, 165, 233, 0.1);
    --box-bg-success: rgba(34, 197, 94, 0.1);
    --box-bg-error: rgba(239, 68, 68, 0.1);
    --box-bg-thinking: rgba(59, 130, 246, 0.1);
    --box-bg-tag: rgba(139, 92, 246, 0.1);
    --box-bg-note: rgba(100, 116, 139, 0.1);

    --code-bg: #f8fafc;
    --code-header-bg: #f1f5f9;
    --code-text: #334155;
    --kbd-bg: #e2e8f0;
}

/* ==========================================================================
   2. 【編輯區 Body 基礎排版】
   ========================================================================== */
body.tinymce-scope {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0;
    box-sizing: border-box;
    min-height: 100%;
    overflow-y: auto !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}




/* ==========================================================================
   3. 【標題與段落基本排版】
   ========================================================================== */
.tinymce-scope h1,
.tinymce-scope h2,
.tinymce-scope h3,
.tinymce-scope h4,
.tinymce-scope h5,
.tinymce-scope h6 {
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.3;
    display: block;
    margin: 2em 0 1em 0;
    width: auto;
    word-break: break-word;
}

.tinymce-scope h1 { font-size: 2.25rem; margin-top: 1em; }
.tinymce-scope h2 { font-size: 1.875rem; }
.tinymce-scope h3 { font-size: 1.5rem; }
.tinymce-scope h4 { font-size: 1.25rem; }
.tinymce-scope h5 { font-size: 1.1rem; }
.tinymce-scope h6 { font-size: 1rem; }

.tinymce-scope div,
.tinymce-scope p {
    color: var(--text-color);
    font-size: 1rem;
    line-height: 2;
    text-align: justify;
    word-break: break-word;
}



.tinymce-scope a {
    color: var(--link-color);
    text-decoration: none;
}

.tinymce-scope a:hover {
    text-decoration: underline;
}

/* =========================================
   3. Tables (表格預設高質感樣式：圓角、表頭、斑馬紋，完美適配亮暗色)
   ========================================= */
.tinymce-scope table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--table-border) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tinymce-scope table td,
.tinymce-scope table th {
    padding: 0.75rem 1rem;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--table-border) !important;
    border-bottom: 1px solid var(--table-border) !important;
    vertical-align: middle;
    line-height: 1.5;
    min-width: 60px;
    font-size: 0.95rem;
}

.tinymce-scope table td p,
.tinymce-scope table th p {
    margin: 0;
}

.tinymce-scope table tr th:last-child,
.tinymce-scope table tr td:last-child {
    border-right: none !important;
}

.tinymce-scope table tbody tr:last-child th,
.tinymce-scope table tbody tr:last-child td,
.tinymce-scope table tr:last-child td {
    border-bottom: none !important;
}

.tinymce-scope table thead th:not([style*="background"]) {
    background: var(--table-head-bg) !important;
}

.tinymce-scope table thead th {
    border-bottom: 2px solid var(--table-head-border) !important;
    font-weight: 700;
    text-align: center;
    color: var(--table-head-text) !important;
    letter-spacing: 0.03em;
    font-size: 0.95em;
    padding: 0.75rem 1rem;
}

.tinymce-scope table tbody tr:nth-child(odd) td:not([style*="background"]) {
    background: var(--table-stripe-bg);
}

/* 📊 表格多儲存格選取高亮樣式 (支援拖曳多格合併) */
.tinymce-scope table td[data-mce-selected],
.tinymce-scope table th[data-mce-selected],
.tinymce-scope table td.mce-item-selected,
.tinymce-scope table th.mce-item-selected,
.tinymce-scope table td[data-mce-first-selected],
.tinymce-scope table td[data-mce-last-selected] {
    background-color: rgba(56, 189, 248, 0.35) !important;
    outline: 2px solid #0284c7 !important;
    outline-offset: -2px;
}


/* =========================================
   20. Page Break (分頁符號樣式控制：100% 舊版原生設計)
   ========================================= */
@media screen {
    /* 前台瀏覽時，隱藏分頁符號 (因為前台是無限卷軸往下看，不需要實體分頁線) */
    body:not(.mce-content-body) .mce-pagebreak,
    .tinymce-scope:not(.mce-content-body) .mce-pagebreak {
        display: none !important;
    }
    
    /* 編輯器內部，覆蓋原版預設很寬高的圖片分頁符號，改為一條細緻的虛線，減少佔用空間 */
    body.mce-content-body .mce-pagebreak,
    .tinymce-scope.mce-content-body .mce-pagebreak,
    .tinymce-scope .mce-pagebreak,
    img.mce-pagebreak,
    .mce-pagebreak {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        margin: 20px 0 !important;
        border: none !important;
        border-top: 2px dashed #ccc !important;
        background: transparent !important;
        cursor: default !important;
        box-shadow: none !important;
        opacity: 0.8 !important;
    }
}





/* ==========================================================================
   🖼️ 圖片與媒體（Video / Audio / Iframe）排版與防跑版規則
   ========================================================================== */

.tinymce-scope img {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: grab;
    transition: outline 0.15s ease, box-shadow 0.15s ease;
    user-select: auto;
}

.tinymce-scope img:active {
    cursor: grabbing;
}

/* 🖼️ 圖片選中時的藍色控制邊框與光暈效果 */
.tinymce-scope img[data-mce-selected],
.tinymce-scope img.mce-item-selected {
    outline: 2px solid #00d9ff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.45) !important;
}

.tinymce-scope video,
.tinymce-scope audio,
.tinymce-scope iframe,
.tinymce-scope figure {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;
}


/* 🖼️ 靠左對齊 (Align Left / Float Left) */
.tinymce-scope img[style*="float: left"],
.tinymce-scope video[style*="float: left"],
.tinymce-scope audio[style*="float: left"],
.tinymce-scope figure[style*="float: left"],
.tinymce-scope .alignleft {
    float: left !important;
    margin: 0.5rem 1.5rem 0.75rem 0 !important;
    max-width: calc(100% - 1.5rem) !important;
}

/* 🖼️ 靠右對齊 (Align Right / Float Right)：防止跑版、重疊與溢出 */
.tinymce-scope img[style*="float: right"],
.tinymce-scope video[style*="float: right"],
.tinymce-scope audio[style*="float: right"],
.tinymce-scope figure[style*="float: right"],
.tinymce-scope .alignright {
    float: right !important;
    margin: 0.5rem 0 0.75rem 1.5rem !important;
    max-width: calc(100% - 1.5rem) !important;
}

/* 🖼️ 置中對齊 (Align Center) */
.tinymce-scope img[style*="margin-left: auto; margin-right: auto"],
.tinymce-scope video[style*="margin-left: auto; margin-right: auto"],
.tinymce-scope audio[style*="margin-left: auto; margin-right: auto"],
.tinymce-scope figure[style*="margin-left: auto; margin-right: auto"],
.tinymce-scope .aligncenter,
.tinymce-scope p[style*="text-align: center"] img,
.tinymce-scope p[style*="text-align: center"] video,
.tinymce-scope p[style*="text-align: center"] audio {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both;
}

/* 🛡️ 父層容器與段落 Clearfix：防止浮動圖片跑版到外層或下個區塊 */
.tinymce-scope p,
.tinymce-scope div,
.tinymce-scope section,
.tinymce-scope article,
.tinymce-scope li {
    position: relative;
}

.tinymce-scope p::after,
.tinymce-scope div::after,
.tinymce-scope section::after,
.tinymce-scope article::after,
.tinymce-scope li::after {
    content: "";
    display: table;
    clear: both;
}

.tinymce-scope blockquote {
    border-left: 4px solid var(--border-color);
    margin: 1.2em 0;
    padding: 0.6em 1em;
    color: var(--text-muted);
    font-style: italic;
    background: rgba(128, 128, 128, 0.05);
    border-radius: 0 4px 4px 0;
}



.tinymce-scope :not(pre)>code {
    background-color: var(--hover-bg) !important;
    color: var(--box-accent-thinking) !important;
    padding: 0.2em 0.4em !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.9em !important;
}

.tinymce-scope code.inline-code-tinymce {
    background-color: rgba(128, 128, 128, 0.15) !important;
    color: var(--box-accent-warning) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.9em !important;
}



/* === pre.code-container：專業深黑程式碼編輯器卡片 (高對比雙層分色設計) === */
/* === pre：專業深黑程式碼編輯器卡片 (高對比雙層分色設計，直接在指定位置呈現) === */
.tinymce-scope pre {
    background: #181c24 !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 8px !important;
    margin: 1.8rem 0 !important;


    /* 頂部預留 56px 標題列高度 */
    padding: 56px 18px 18px 18px !important;
    height: auto !important;
    min-height: 90px !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7) !important;
    display: block !important;
    position: relative !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #abb2bf !important;
}

/* 🎨【純 CSS 頂部明顯獨立標題列 (藍灰金屬色 #282e39，高對比一目了然)】 */
.tinymce-scope pre::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: #282e39;
    border-bottom: 2px solid rgba(56, 189, 248, 0.35);
    border-radius: 7px 7px 0 0;
    pointer-events: none;
    z-index: 1;
}

/* 🏷️【頂部精緻語言膠囊徽章】 */
.tinymce-scope pre::before {
    content: attr(data-language-label);
    position: absolute;
    top: 9px;
    left: 14px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.45);
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 📋【右上角浮動按鈕組：複製與刪除】 */
.tinymce-scope .code-floating-actions,
.code-floating-actions {
    position: absolute !important;
    top: 9px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 5 !important;
    user-select: none !important;
}

.tinymce-scope .code-copy-floating-btn,
.code-copy-floating-btn,
.tinymce-scope .code-delete-floating-btn,
.code-delete-floating-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #e2e8f0 !important;
    width: 28px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.tinymce-scope .code-copy-floating-btn:hover,
.code-copy-floating-btn:hover {
    background: rgba(56, 189, 248, 0.3) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1px) !important;
}

.tinymce-scope .code-copy-floating-btn.copied,
.code-copy-floating-btn.copied {
    background: rgba(74, 222, 128, 0.25) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.6) !important;
}

.tinymce-scope .code-delete-floating-btn:hover,
.code-delete-floating-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    transform: translateY(-1px) !important;
}






.code-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.code-lang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    display: inline-block;
}

.code-lang-select {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    border-radius: 5px !important;
    padding: 3px 8px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.code-lang-select:hover,
.code-lang-select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
    background: rgba(15, 23, 42, 0.95) !important;
}

.code-lang-select option {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

.tinymce-scope .copy-button,
.copy-button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    padding: 3px 10px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}

.tinymce-scope .copy-button:hover,
.copy-button:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

.copy-button.copied {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
}

/* code 標籤：恢復 pre 格式化文字排版 */
pre > code,
pre.code-container > code,
.tinymce-scope pre.code-container > code,
.tinymce-scope pre > code {
    display: block !important;
    white-space: pre !important;
    word-break: normal !important;
    word-wrap: normal !important;
    tab-size: 2 !important;
    -moz-tab-size: 2 !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 16px !important;
    background: transparent !important;
    color: #f1f5f9 !important;
    overflow-x: auto !important;
}

/* 🎨【PrismJS 經典語法高亮色彩】 */
.tinymce-scope code[class*="language-"],
.tinymce-scope pre[class*="language-"],
code[class*="language-"] {
    color: #f8f8f2 !important;
    text-shadow: none !important;
}

.tinymce-scope .token.comment,
.tinymce-scope .token.prolog,
.tinymce-scope .token.doctype,
.tinymce-scope .token.cdata {
    color: #6272a4 !important;
    font-style: italic !important;
}

.tinymce-scope .token.punctuation {
    color: #e2e8f0 !important;
}

.tinymce-scope .token.property,
.tinymce-scope .token.tag,
.tinymce-scope .token.constant,
.tinymce-scope .token.symbol,
.tinymce-scope .token.deleted {
    color: #ff79c6 !important;
}

.tinymce-scope .token.boolean,
.tinymce-scope .token.number {
    color: #bd93f9 !important;
}

.tinymce-scope .token.selector,
.tinymce-scope .token.attr-name,
.tinymce-scope .token.string,
.tinymce-scope .token.char,
.tinymce-scope .token.builtin,
.tinymce-scope .token.inserted {
    color: #50fa7b !important;
}

.tinymce-scope .token.operator,
.tinymce-scope .token.entity,
.tinymce-scope .token.url,
.tinymce-scope .language-css .token.string,
.tinymce-scope .style .token.string {
    color: #f1fa8c !important;
}

.tinymce-scope .token.atrule,
.tinymce-scope .token.attr-value,
.tinymce-scope .token.keyword {
    color: #ff79c6 !important;
}

.tinymce-scope .token.function,
.tinymce-scope .token.class-name {
    color: #8be9fd !important;
}

.tinymce-scope .token.regex,
.tinymce-scope .token.important,
.tinymce-scope .token.variable {
    color: #f1fa8c !important;
}



/* ==========================================================================
   4. 【表格 (Table) 完整樣式】
   ========================================================================== */
.tinymce-scope table {
    width: 100%;
    margin: 1.2em 0;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--table-border) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tinymce-scope table td,
.tinymce-scope table th {
    padding: 0.6rem 1rem;
    border-right: 1px solid var(--table-border) !important;
    border-bottom: 1px solid var(--table-border) !important;
    vertical-align: middle;
    line-height: 1.5;
    font-size: 1rem;
}

.tinymce-scope table tr th:last-child,
.tinymce-scope table tr td:last-child {
    border-right: none !important;
}

.tinymce-scope table tbody tr:last-child td {
    border-bottom: none !important;
}

.tinymce-scope table thead th {
    background: var(--table-head-bg);
    border-bottom: 2px solid var(--table-head-border) !important;
    font-weight: 700;
    text-align: center;
    color: var(--table-head-text);
}

.tinymce-scope table tbody tr:nth-child(odd) td {
    background: var(--table-stripe-bg);
}

.tinymce-scope table tbody tr:hover td {
    background-color: var(--hover-bg);
}

/* ==========================================================================
   5. 【💡 匡線樣式 (Boxes & Highlights)】
   ========================================================================== */
[class$="-box-tinymce"],
[class$="-block-tinymce"] {
    padding: 1.2em 1.4em;
    margin: 1.2em 0;
    border-radius: 6px;
    position: relative;
    color: var(--text-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    background: transparent;
    transition: all 0.2s ease;
    min-height: 1.5em;
    box-sizing: border-box;
}

.highlight-box-tinymce {
    border-left: 5px solid var(--box-accent-highlight);
    background-color: var(--box-bg-highlight);
}

.warning-box-tinymce {
    border-left: 8px double var(--box-accent-warning);
    background-color: var(--box-bg-warning);
}

.info-box-tinymce {
    border-left: 5px solid var(--box-accent-info);
    background-color: var(--box-bg-info);
    border-top-right-radius: 16px;
}

.success-box-tinymce {
    border: 1px solid rgba(40, 167, 69, 0.25);
    border-left: 6px solid var(--box-accent-success);
    background-color: var(--box-bg-success);
}

.error-box-tinymce {
    border-left: 5px solid var(--box-accent-error);
    background-color: var(--box-bg-error);
}

.thinking-box-tinymce {
    border-left: 5px dashed var(--box-accent-thinking);
    background-color: var(--box-bg-thinking);
    font-style: italic;
}

.tag-box-tinymce {
    border-left: 5px solid var(--box-accent-tag);
    background-color: var(--box-bg-tag);
}

.note-box-tinymce {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--box-accent-note);
    background-color: var(--box-bg-note);
}

.hot-box-tinymce {
    border-left: 5px solid #ff5722;
    background: linear-gradient(to right, rgba(255, 87, 34, 0.12), transparent);
}

.data-box-tinymce {
    background: var(--code-bg);
    border-left: 5px solid var(--box-accent-success);
    font-family: monospace;
    color: var(--box-accent-success);
}

/* ==========================================================================
   6. 【📦 區塊樣式 (Block Styles)】
   ========================================================================== */
.text-box-tinymce {
    background: var(--hover-bg);
    border: 2px dashed var(--border-color);
}

.border-box-tinymce {
    background: transparent;
    border: 2px dashed var(--border-color);
}

.custom-box-tinymce {
    border: 2px dashed var(--text-muted);
    background-color: var(--box-bg-note);
}

.question-box-tinymce {
    background-color: rgba(0, 123, 255, 0.1);
    border: 2px dashed #007bff;
}

.answer-box-tinymce {
    background-color: rgba(23, 162, 184, 0.1);
    border: 2px dashed #17a2b8;
}

.todo-box-tinymce {
    background-color: rgba(173, 181, 189, 0.1);
    border: 2px dashed #adb5bd;
    border-radius: 12px;
}

.reminder-box-tinymce {
    background-color: rgba(255, 193, 7, 0.1);
    border: 2px dashed #ffc107;
    border-radius: 12px;
}

.tag-block-tinymce {
    border: 2px dashed var(--box-accent-tag);
    background-color: var(--box-bg-tag);
    border-radius: 8px;
}

.cyan-block-tinymce {
    background-color: rgba(13, 202, 240, 0.08);
    border: 2px dashed #0dcaf0;
    border-radius: 8px;
}

.pink-block-tinymce {
    background-color: rgba(232, 62, 140, 0.08);
    border: 2px dashed #e83e8c;
    border-radius: 8px;
}

.orange-block-tinymce {
    background-color: rgba(253, 126, 20, 0.08);
    border: 2px dashed #fd7e14;
    border-radius: 8px;
}

.green-block-tinymce {
    background-color: rgba(40, 167, 69, 0.08);
    border: 2px dashed #28a745;
    border-radius: 8px;
}

.red-block-tinymce {
    background-color: rgba(220, 53, 69, 0.08);
    border: 2px dashed #dc3545;
    border-radius: 8px;
}

.brown-block-tinymce {
    background-color: rgba(139, 69, 19, 0.08);
    border: 2px dashed #8b4513;
    border-radius: 8px;
}

/* ==========================================================================
   7. 【🎨 特色匡線樣式 (Special Boxes)】
   ========================================================================== */
.award-box-tinymce {
    border: 2px solid var(--box-accent-warning);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--box-bg-warning) 0%, transparent 100%);
    position: relative;
}

.award-box-tinymce::before {
    content: "🏆";
    position: absolute;
    top: -12px;
    right: -10px;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.step-box-tinymce {
    border-left: 6px dotted var(--box-accent-info);
    background-color: var(--box-bg-info);
}

.summary-box-tinymce {
    border-top: 4px solid var(--box-accent-thinking);
    background: var(--box-bg-thinking);
    border-radius: 0 0 6px 6px;
    font-weight: 500;
}

.code-box-tinymce {
    font-family: Consolas, Monaco, monospace;
    background-color: var(--code-bg);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--box-accent-thinking);
    border-radius: 4px;
}

.meeting-box-tinymce {
    border-top: 3px double var(--box-accent-success);
    border-bottom: 3px double var(--box-accent-success);
    background-color: rgba(40, 167, 69, 0.03);
    border-radius: 0;
}

.quote-box-tinymce {
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.1);
    border-radius: 6px;
    font-style: italic;
    padding: 1.5em 2.5em;
    position: relative;
}

.target-box-tinymce {
    border: 1px dashed rgba(13, 202, 240, 0.4);
    border-left: 6px solid var(--box-accent-info);
    background-image: linear-gradient(135deg, rgba(13, 202, 240, 0.08) 0%, rgba(33, 150, 243, 0.02) 100%);
    border-radius: 8px;
}

.secret-box-tinymce {
    border: 1px dashed var(--box-accent-tag);
    background: repeating-linear-gradient(45deg, rgba(111, 66, 193, 0.03), rgba(111, 66, 193, 0.03) 10px, rgba(111, 66, 193, 0.06) 10px, rgba(111, 66, 193, 0.06) 20px);
    border-radius: 6px;
}

.sticky-note-tinymce {
    background-color: rgba(255, 235, 59, 0.07);
    border-left: 5px solid var(--box-accent-warning);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.08);
}

.story-box-tinymce {
    font-family: Georgia, serif;
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    background: rgba(128, 128, 128, 0.05);
    border-radius: 0;
}

.dialogue-box-tinymce {
    background: var(--hover-bg);
    border-radius: 16px;
    border-bottom-left-radius: 0;
    display: inline-block;
}

.caution-box-tinymce {
    border: 2px solid var(--box-accent-error);
    background: repeating-linear-gradient(45deg, var(--box-bg-error), var(--box-bg-error) 10px, transparent 10px, transparent 20px);
    border-radius: 4px;
}

.parchment-box-tinymce {
    background: rgba(245, 222, 179, 0.1);
    color: var(--text-color);
    border: 4px double var(--box-accent-warning);
    font-family: Georgia, serif;
    border-radius: 2px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.pros-box-tinymce {
    border-top: 4px solid var(--box-accent-success);
    background-color: rgba(40, 167, 69, 0.05);
    border-radius: 8px;
}

.cons-box-tinymce {
    border-top: 4px solid var(--box-accent-error);
    background-color: rgba(220, 53, 69, 0.05);
    border-radius: 8px;
}

.done-box-tinymce {
    border: 2px solid var(--box-accent-success);
    background: repeating-linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0px, rgba(40, 167, 69, 0.05) 10px, transparent 10px, transparent 20px);
    border-radius: 8px;
}

.alert-box-tinymce {
    border: 3px solid var(--box-accent-error);
    border-top: 12px solid var(--box-accent-error);
    background-color: var(--box-bg-error);
    border-radius: 6px;
}

/* ==========================================================================
   8. 【✏️ 文字標籤樣式 (Inline Tags)】
   ========================================================================== */
.tinymce-scope span[data-icon]::before {
    content: attr(data-icon) " ";
    margin-right: 0.4em;
}

/* ==========================================================================
   9. 【🖍️ 螢光筆與文字特殊樣式】
   ========================================================================== */
/* 1. 質感半高螢光筆系列 */
.tinymce-scope mark.marker-half-yellow-tinymce, mark.marker-half-yellow-tinymce { background: linear-gradient(to top, rgba(255, 235, 59, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }
.tinymce-scope mark.marker-half-green-tinymce, mark.marker-half-green-tinymce { background: linear-gradient(to top, rgba(74, 222, 128, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }
.tinymce-scope mark.marker-half-blue-tinymce, mark.marker-half-blue-tinymce { background: linear-gradient(to top, rgba(56, 189, 248, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }
.tinymce-scope mark.marker-half-red-tinymce, mark.marker-half-red-tinymce { background: linear-gradient(to top, rgba(248, 113, 113, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }
.tinymce-scope mark.marker-half-purple-tinymce, mark.marker-half-purple-tinymce { background: linear-gradient(to top, rgba(192, 132, 252, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }
.tinymce-scope mark.marker-half-orange-tinymce, mark.marker-half-orange-tinymce { background: linear-gradient(to top, rgba(251, 146, 60, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }
.tinymce-scope mark.marker-half-brown-tinymce, mark.marker-half-brown-tinymce { background: linear-gradient(to top, rgba(162, 114, 82, 0.6) 40%, transparent 40%); color: inherit; padding: 0 2px; }

/* 2. 柔和全高螢光筆系列 */
.tinymce-scope mark.marker-yellow-tinymce, mark.marker-yellow-tinymce { background-color: rgba(255, 235, 59, 0.35); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-green-tinymce, mark.marker-green-tinymce { background-color: rgba(74, 222, 128, 0.3); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-blue-tinymce, mark.marker-blue-tinymce { background-color: rgba(56, 189, 248, 0.3); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-red-tinymce, mark.marker-red-tinymce { background-color: rgba(248, 113, 113, 0.3); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-purple-tinymce, mark.marker-purple-tinymce { background-color: rgba(192, 132, 252, 0.3); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-orange-tinymce, mark.marker-orange-tinymce { background-color: rgba(251, 146, 60, 0.3); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-brown-tinymce, mark.marker-brown-tinymce { background-color: rgba(162, 114, 82, 0.3); color: inherit; border-radius: 4px; padding: 1px 4px; }
.tinymce-scope mark.marker-gray-tinymce, mark.marker-gray-tinymce { background-color: rgba(148, 163, 184, 0.25); color: inherit; border-radius: 4px; padding: 1px 4px; }


/* 3. 漸層科技光感螢光筆系列 */
.tinymce-scope mark.marker-gradient-rainbow-tinymce, mark.marker-gradient-rainbow-tinymce {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(245, 158, 11, 0.3), rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
    color: inherit;
    border-radius: 4px;
    padding: 1px 6px;
}

.tinymce-scope mark.marker-gradient-sunset-tinymce, mark.marker-gradient-sunset-tinymce {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.35), rgba(249, 115, 22, 0.35), rgba(234, 179, 8, 0.35));
    color: inherit;
    border-radius: 4px;
    padding: 1px 6px;
}

.tinymce-scope mark.marker-gradient-aurora-tinymce, mark.marker-gradient-aurora-tinymce {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.35), rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));
    color: inherit;
    border-radius: 4px;
    padding: 1px 6px;
}


.tinymce-scope kbd.kbd-tinymce {
    background-color: var(--kbd-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    padding: 2px 6px;
    font-size: 0.85em;
    border-radius: 4px;
    font-family: inherit;
}

.tinymce-scope code.inline-code-tinymce {
    background-color: rgba(128, 128, 128, 0.15);
    color: var(--box-accent-warning);
    padding: 2px 6px;
    font-size: 0.9em;
    border-radius: 4px;
    font-family: monospace;
}

.tinymce-scope .wavy-underline-tinymce {
    text-decoration: underline wavy var(--box-accent-error);
}

.tinymce-scope .dashed-underline-tinymce {
    text-decoration: underline dashed var(--text-muted);
    text-underline-offset: 4px;
}

.tinymce-scope .spoiler-text-tinymce {
    background-color: var(--text-color);
    color: transparent;
    border-radius: 4px;
    padding: 0 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.tinymce-scope .spoiler-text-tinymce:hover {
    background-color: rgba(128, 128, 128, 0.1);
    color: var(--text-color);
}

.tinymce-scope .rainbow-text-tinymce {
    background-image: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    display: inline-block;
}

.tinymce-scope .sunset-text-tinymce {
    background-image: linear-gradient(to right, #f43f5e, #f97316, #eab308);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    display: inline-block;
}

.tinymce-scope .aurora-text-tinymce {
    background-image: linear-gradient(to right, #06b6d4, #3b82f6, #9333ea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    display: inline-block;
}


.tinymce-scope .badge-tinymce {
    padding: 2px 8px;
    border-radius: 12px;
    background-color: var(--hover-bg);
    border: 1px solid var(--border-color);
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
}

.tinymce-scope .neon-text-tinymce {
    color: #fff;
    text-shadow: 0 0 5px var(--box-accent-info), 0 0 10px var(--box-accent-info), 0 0 20px var(--box-accent-info);
    background-color: #1a1a1a;
    padding: 2px 6px;
    border-radius: 4px;
}

.tinymce-scope .engraved-text-tinymce {
    color: var(--bg-color);
    text-shadow: 1px 1px 1px var(--text-muted), -1px -1px 1px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    background-color: var(--text-color);
    padding: 2px 4px;
    border-radius: 2px;
}

.tinymce-scope .btn-3d-tinymce {
    display: inline-block;
    padding: 2px 8px;
    background: var(--code-header-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 3px 0 var(--border-color);
    font-weight: bold;
    transform: translateY(-2px);
    margin: 0 2px;
}

.tinymce-scope .zoom-text-tinymce {
    font-size: 1.25em;
    font-weight: 900;
    color: var(--box-accent-error);
    letter-spacing: 1px;
    display: inline-block;
    transform: scale(1.05);
}

/* ==========================================================================
   9. 【🔢 自訂編號清單與圖示清單樣式 (Lists & Numbering System)】
   ========================================================================== */
.tinymce-scope ul.check-list,
.tinymce-scope ul.star-list,
.tinymce-scope ul.button-list,
.tinymce-scope ul.circle-list,
.tinymce-scope ul.red-circle-list,
.tinymce-scope ul.triangle-list,
.tinymce-scope ul.lightning-list,
.tinymce-scope ul.exclamation-list,
.tinymce-scope ul.fire-list,
.tinymce-scope ul.target-list,
.tinymce-scope ul.action-list,
.tinymce-scope ul.question-list,
.tinymce-scope ul.key-list,
.tinymce-scope ul.idea-list {
    list-style: none !important;
}

.tinymce-scope ul.check-list li,
.tinymce-scope ul.star-list li,
.tinymce-scope ul.button-list li,
.tinymce-scope ul.circle-list li,
.tinymce-scope ul.red-circle-list li,
.tinymce-scope ul.triangle-list li,
.tinymce-scope ul.lightning-list li,
.tinymce-scope ul.exclamation-list li,
.tinymce-scope ul.fire-list li,
.tinymce-scope ul.target-list li,
.tinymce-scope ul.action-list li,
.tinymce-scope ul.question-list li,
.tinymce-scope ul.key-list li,
.tinymce-scope ul.idea-list li {
    padding-left: 1.8em !important;
    text-indent: -1.8em !important;
}

.tinymce-scope ul.check-list li::before { content: "✅ "; margin-right: 0.5em; }
.tinymce-scope ul.star-list li::before { content: "⭐ "; margin-right: 0.5em; }
.tinymce-scope ul.button-list li::before { content: "📌 "; margin-right: 0.5em; }
.tinymce-scope ul.circle-list li::before { content: "🔵 "; margin-right: 0.5em; }
.tinymce-scope ul.red-circle-list li::before { content: "🔴 "; margin-right: 0.5em; }
.tinymce-scope ul.triangle-list li::before { content: "📐 "; margin-right: 0.5em; }
.tinymce-scope ul.lightning-list li::before { content: "⚡ "; margin-right: 0.5em; }
.tinymce-scope ul.idea-list li::before { content: "💡 "; margin-right: 0.5em; }
.tinymce-scope ul.exclamation-list li::before { content: "❗ "; margin-right: 0.5em; }
.tinymce-scope ul.fire-list li::before { content: "🔥 "; margin-right: 0.5em; }
.tinymce-scope ul.target-list li::before { content: "🎯 "; margin-right: 0.5em; }
.tinymce-scope ul.action-list li::before { content: "🚀 "; margin-right: 0.5em; }
.tinymce-scope ul.question-list li::before { content: "❓ "; margin-right: 0.5em; }
.tinymce-scope ul.key-list li::before { content: "🔑 "; margin-right: 0.5em; }

/* 🔢 純文字編號樣式 */
.tinymce-scope ol.list-type-decimal:not([class*="-list-tinymce"]) { list-style-type: decimal !important; padding-left: 2rem !important; }
.tinymce-scope ol.list-type-lower-alpha:not([class*="-list-tinymce"]) { list-style-type: lower-alpha !important; padding-left: 2rem !important; }
.tinymce-scope ol.list-type-upper-alpha:not([class*="-list-tinymce"]) { list-style-type: upper-alpha !important; padding-left: 2rem !important; }
.tinymce-scope ol.list-type-lower-roman:not([class*="-list-tinymce"]) { list-style-type: lower-roman !important; padding-left: 2rem !important; }

/* 🎨 編號清單外觀設計 (100% 舊版原生設計：預設獨立計數，續接時 counter-reset: none) */
body.tinymce-scope ol[class*="-list-tinymce"],
.tinymce-scope ol[class*="-list-tinymce"] {
    list-style: none !important;
    padding-left: 1.5rem !important;
}

body.tinymce-scope ol.restart-counter-tinymce.circle-num-list-tinymce,
body.tinymce-scope ol.circle-num-list-tinymce:not(.continue-counter-tinymce),
.tinymce-scope ol.restart-counter-tinymce.circle-num-list-tinymce,
.tinymce-scope ol.circle-num-list-tinymce:not(.continue-counter-tinymce) {
    counter-reset: circle-counter !important;
}

body.tinymce-scope ol.restart-counter-tinymce.gray-badge-num-list-tinymce,
body.tinymce-scope ol.gray-badge-num-list-tinymce:not(.continue-counter-tinymce),
.tinymce-scope ol.restart-counter-tinymce.gray-badge-num-list-tinymce,
.tinymce-scope ol.gray-badge-num-list-tinymce:not(.continue-counter-tinymce) {
    counter-reset: btn-num-counter !important;
}

body.tinymce-scope ol.restart-counter-tinymce.alpha-badge-list-tinymce,
body.tinymce-scope ol.alpha-badge-list-tinymce:not(.continue-counter-tinymce),
.tinymce-scope ol.restart-counter-tinymce.alpha-badge-list-tinymce,
.tinymce-scope ol.alpha-badge-list-tinymce:not(.continue-counter-tinymce) {
    counter-reset: alpha-counter !important;
}

body.tinymce-scope ol.restart-counter-tinymce.underline-num-list-tinymce,
body.tinymce-scope ol.underline-num-list-tinymce:not(.continue-counter-tinymce),
.tinymce-scope ol.restart-counter-tinymce.underline-num-list-tinymce,
.tinymce-scope ol.underline-num-list-tinymce:not(.continue-counter-tinymce) {
    counter-reset: underline-counter !important;
}

body.tinymce-scope ol.restart-counter-tinymce.bracket-num-list-tinymce,
body.tinymce-scope ol.bracket-num-list-tinymce:not(.continue-counter-tinymce),
.tinymce-scope ol.restart-counter-tinymce.bracket-num-list-tinymce,
.tinymce-scope ol.bracket-num-list-tinymce:not(.continue-counter-tinymce) {
    counter-reset: bracket-counter !important;
}

body.tinymce-scope ol.continue-counter-tinymce,
body.tinymce-scope ol.continue-counter-tinymce.restart-counter-tinymce,
.tinymce-scope ol.continue-counter-tinymce,
.tinymce-scope ol.continue-counter-tinymce.restart-counter-tinymce {
    counter-reset: none !important;
}




.tinymce-scope ol[class*="-list-tinymce"] > li {
    position: relative;
    padding-left: 2rem !important;
    margin-bottom: 0.75rem;
}

/* 🔵 藍圈圈編號 */
.tinymce-scope ol.circle-num-list-tinymce > li::before {
    counter-increment: circle-counter;
    content: counter(circle-counter);
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-color: var(--box-accent-info, #0284c7);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🏷️ 灰膠囊徽章 */
.tinymce-scope ol.gray-badge-num-list-tinymce > li::before {
    counter-increment: btn-num-counter;
    content: counter(btn-num-counter);
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-color: var(--code-header-bg, #1e293b);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    color: var(--text-color, #f8fafc);
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🔤 字母徽章 */
.tinymce-scope ol.alpha-badge-list-tinymce > li::before {
    counter-increment: alpha-counter;
    content: counter(alpha-counter, upper-alpha);
    position: absolute;
    left: 0;
    top: 4px;
    padding: 1px 6px;
    background-color: var(--hover-bg, rgba(255,255,255,0.08));
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    color: var(--text-color, #f8fafc);
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ➖ 強調底線 */
.tinymce-scope ol.underline-num-list-tinymce > li::before {
    counter-increment: underline-counter;
    content: counter(underline-counter) ".";
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: bold;
    color: var(--box-accent-info, #38bdf8);
    border-bottom: 2px solid var(--box-accent-info, #38bdf8);
    padding-bottom: 2px;
    line-height: 1;
}

/* 【】 括號編號 */
.tinymce-scope ol.bracket-num-list-tinymce > li::before {
    counter-increment: bracket-counter;
    content: "【" counter(bracket-counter) "】";
    position: absolute;
    left: -0.5rem;
    top: 2px;
    font-weight: bold;
    color: var(--text-color, #f8fafc);
    opacity: 0.9;
}

/* 🔄 解耦：型態覆寫規則 (當外觀與型態組合時) */
.tinymce-scope ol.circle-num-list-tinymce.list-type-decimal > li::before { content: counter(circle-counter, decimal) !important; }
.tinymce-scope ol.circle-num-list-tinymce.list-type-lower-alpha > li::before { content: counter(circle-counter, lower-alpha) !important; }
.tinymce-scope ol.circle-num-list-tinymce.list-type-upper-alpha > li::before { content: counter(circle-counter, upper-alpha) !important; }
.tinymce-scope ol.circle-num-list-tinymce.list-type-lower-roman > li::before { content: counter(circle-counter, lower-roman) !important; }

.tinymce-scope ol.gray-badge-num-list-tinymce.list-type-decimal > li::before { content: counter(btn-num-counter, decimal) !important; }
.tinymce-scope ol.gray-badge-num-list-tinymce.list-type-lower-alpha > li::before { content: counter(btn-num-counter, lower-alpha) !important; }
.tinymce-scope ol.gray-badge-num-list-tinymce.list-type-upper-alpha > li::before { content: counter(btn-num-counter, upper-alpha) !important; }
.tinymce-scope ol.gray-badge-num-list-tinymce.list-type-lower-roman > li::before { content: counter(btn-num-counter, lower-roman) !important; }

.tinymce-scope ol.alpha-badge-list-tinymce.list-type-decimal > li::before { content: counter(alpha-counter, decimal) !important; }
.tinymce-scope ol.alpha-badge-list-tinymce.list-type-lower-alpha > li::before { content: counter(alpha-counter, lower-alpha) !important; }
.tinymce-scope ol.alpha-badge-list-tinymce.list-type-upper-alpha > li::before { content: counter(alpha-counter, upper-alpha) !important; }
.tinymce-scope ol.alpha-badge-list-tinymce.list-type-lower-roman > li::before { content: counter(alpha-counter, lower-roman) !important; }

.tinymce-scope ol.underline-num-list-tinymce.list-type-decimal > li::before { content: counter(underline-counter, decimal) "." !important; }
.tinymce-scope ol.underline-num-list-tinymce.list-type-lower-alpha > li::before { content: counter(underline-counter, lower-alpha) "." !important; }
.tinymce-scope ol.underline-num-list-tinymce.list-type-upper-alpha > li::before { content: counter(underline-counter, upper-alpha) "." !important; }
.tinymce-scope ol.underline-num-list-tinymce.list-type-lower-roman > li::before { content: counter(underline-counter, lower-roman) "." !important; }

.tinymce-scope ol.bracket-num-list-tinymce.list-type-decimal > li::before { content: "【" counter(bracket-counter, decimal) "】" !important; }
.tinymce-scope ol.bracket-num-list-tinymce.list-type-lower-alpha > li::before { content: "【" counter(bracket-counter, lower-alpha) "】" !important; }
.tinymce-scope ol.bracket-num-list-tinymce.list-type-upper-alpha > li::before { content: "【" counter(bracket-counter, upper-alpha) "】" !important; }
.tinymce-scope ol.bracket-num-list-tinymce.list-type-lower-roman > li::before { content: "【" counter(bracket-counter, lower-roman) "】" !important; }




/* ==========================================================================
   10. 【🎨 TinyMCE 下拉選單所見即所得樣式預覽 (WYSIWYG Menu Items)】
   ========================================================================== */
.tox-menu .tox-collection__item {

    padding: 2px 4px !important;
}

.tox-menu .tox-collection__item-label {
    display: block !important;
    padding: 4px 10px !important;
    font-size: 0.88em !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
}

.tox-menu .tox-collection__item--active {
    background-color: rgba(128, 128, 128, 0.15) !important;
    color: inherit !important;
}

/* 匡線與區塊選單預覽 */
.tox-collection__item[aria-label="💡 提示框"] .tox-collection__item-label { background-color: var(--box-bg-highlight) !important; border-left: 5px solid var(--box-accent-highlight) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="⚠️ 警告框"] .tox-collection__item-label { background-color: var(--box-bg-warning) !important; border-left: 8px double var(--box-accent-warning) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="📘 資訊框"] .tox-collection__item-label { background-color: var(--box-bg-info) !important; border-left: 5px solid var(--box-accent-info) !important; border-top-right-radius: 16px !important; }
.tox-collection__item[aria-label="✅ 成功框"] .tox-collection__item-label { background-color: var(--box-bg-success) !important; border: 1px solid rgba(40, 167, 69, 0.25) !important; border-left: 6px solid var(--box-accent-success) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="❌ 錯誤框"] .tox-collection__item-label { border-left: 5px solid var(--box-accent-error) !important; background-color: var(--box-bg-error) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🧠 思考框"] .tox-collection__item-label { background-color: var(--box-bg-thinking) !important; border-left: 5px dashed var(--box-accent-thinking) !important; font-style: italic !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="📎 附註框"] .tox-collection__item-label { background-color: var(--box-bg-tag) !important; border-left: 5px solid var(--box-accent-tag) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="📝 筆記框"] .tox-collection__item-label { border: 1px solid var(--border-color) !important; border-left: 4px solid var(--box-accent-note) !important; background-color: var(--box-bg-note) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🔥 焦點框"] .tox-collection__item-label { border-left: 5px solid #ff5722 !important; background: linear-gradient(to right, rgba(255, 87, 34, 0.12), transparent) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="📊 數據框"] .tox-collection__item-label { background: var(--code-bg) !important; border-left: 5px solid var(--box-accent-success) !important; font-family: monospace !important; color: var(--box-accent-success) !important; border-radius: 4px !important; }

/* 特色匡線樣式選單預覽 */
.tox-collection__item[aria-label="🏆 冠軍獎點框"] .tox-collection__item-label { border: 2px solid var(--box-accent-warning) !important; background: linear-gradient(135deg, var(--box-bg-warning) 0%, transparent 100%) !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🐾 步驟教學框"] .tox-collection__item-label { background-color: var(--box-bg-info) !important; border-left: 6px dotted var(--box-accent-info) !important; }
.tox-collection__item[aria-label="🔍 總結摘要框"] .tox-collection__item-label { border-top: 4px solid var(--box-accent-thinking) !important; background: var(--box-bg-thinking) !important; border-radius: 0 0 6px 6px !important; }
.tox-collection__item[aria-label="💻 程式碼說明框"] .tox-collection__item-label { font-family: Consolas, Monaco, monospace !important; background-color: var(--code-bg) !important; border: 1px solid var(--border-color) !important; border-top: 3px solid var(--box-accent-thinking) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🤝 會議記錄框"] .tox-collection__item-label { border-top: 3px double var(--box-accent-success) !important; border-bottom: 3px double var(--box-accent-success) !important; background-color: rgba(40, 167, 69, 0.03) !important; }
.tox-collection__item[aria-label="✨ 亮點精句框"] .tox-collection__item-label { background-color: rgba(255, 193, 7, 0.03) !important; font-style: italic !important; }
.tox-collection__item[aria-label="🎯 目標框"] .tox-collection__item-label { border: 1px dashed rgba(13, 202, 240, 0.4) !important; border-left: 6px solid var(--box-accent-info) !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🔒 私密安全框"] .tox-collection__item-label { border: 1px dashed var(--box-accent-tag) !important; border-radius: 6px !important; }
.tox-collection__item[aria-label="📌 便籤貼 (Memo)"] .tox-collection__item-label { background-color: rgba(255, 235, 59, 0.07) !important; border-left: 5px solid var(--box-accent-warning) !important; border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }
.tox-collection__item[aria-label="📖 故事引言框"] .tox-collection__item-label { font-family: Georgia, serif !important; border-top: 2px solid var(--border-color) !important; border-bottom: 2px solid var(--border-color) !important; }
.tox-collection__item[aria-label="💬 對話泡泡框"] .tox-collection__item-label { background: var(--hover-bg) !important; border-radius: 16px !important; border-bottom-left-radius: 0 !important; width: auto !important; }
.tox-collection__item[aria-label="🚧 施工警告框"] .tox-collection__item-label { border: 2px solid var(--box-accent-error) !important; background: repeating-linear-gradient(45deg, var(--box-bg-error), var(--box-bg-error) 10px, transparent 10px, transparent 20px) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="📜 羊皮卷軸框"] .tox-collection__item-label { background: rgba(245, 222, 179, 0.1) !important; border: 4px double var(--box-accent-warning) !important; font-family: Georgia, serif !important; }
.tox-collection__item[aria-label="🟢 優點區塊"] .tox-collection__item-label { border-top: 4px solid var(--box-accent-success) !important; background: linear-gradient(180deg, rgba(40, 167, 69, 0.08) 0%, transparent 100%) !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🔴 缺點區塊"] .tox-collection__item-label { border-top: 4px solid var(--box-accent-error) !important; background: linear-gradient(180deg, rgba(220, 53, 69, 0.08) 0%, transparent 100%) !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="✅ 完成區"] .tox-collection__item-label { border: 2px solid var(--box-accent-success) !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🚨 警示區"] .tox-collection__item-label { border: 3px solid var(--box-accent-error) !important; border-top: 12px solid var(--box-accent-error) !important; background-color: var(--box-bg-error) !important; border-radius: 6px !important; }

.tox-collection__item[aria-label="📰 文字區"] .tox-collection__item-label { background: var(--hover-bg) !important; border: 2px dashed var(--border-color) !important; border-radius: 6px !important; }
.tox-collection__item[aria-label="📐 邊框區"] .tox-collection__item-label { background: transparent !important; border: 2px dashed var(--border-color) !important; border-radius: 6px !important; }
.tox-collection__item[aria-label="📦 自訂區"] .tox-collection__item-label { border: 2px dashed var(--text-muted) !important; background-color: var(--box-bg-note) !important; border-radius: 6px !important; }
.tox-collection__item[aria-label="❓ 問題區"] .tox-collection__item-label { background-color: rgba(0, 123, 255, 0.1) !important; border: 2px dashed #007bff !important; border-radius: 6px !important; }
.tox-collection__item[aria-label="🧪 答案區"] .tox-collection__item-label { background-color: rgba(23, 162, 184, 0.1) !important; border: 2px dashed #17a2b8 !important; border-radius: 6px !important; }
.tox-collection__item[aria-label="🧾 代辦區"] .tox-collection__item-label { background-color: rgba(173, 181, 189, 0.1) !important; border: 2px dashed #adb5bd !important; border-radius: 12px !important; }
.tox-collection__item[aria-label="🔔 提醒區"] .tox-collection__item-label { background-color: rgba(255, 193, 7, 0.1) !important; border: 2px dashed #ffc107 !important; border-radius: 12px !important; }
.tox-collection__item[aria-label="📎 標籤區"] .tox-collection__item-label { border: 2px dashed var(--box-accent-tag) !important; background-color: var(--box-bg-tag) !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🌊 青色區塊"] .tox-collection__item-label { background-color: rgba(13, 202, 240, 0.08) !important; border: 2px dashed #0dcaf0 !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🌸 粉紅區塊"] .tox-collection__item-label { background-color: rgba(232, 62, 140, 0.08) !important; border: 2px dashed #e83e8c !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🍊 橘色區塊"] .tox-collection__item-label { background-color: rgba(253, 126, 20, 0.08) !important; border: 2px dashed #fd7e14 !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🟢 綠色區塊"] .tox-collection__item-label { background-color: rgba(40, 167, 69, 0.08) !important; border: 2px dashed #28a745 !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🔴 紅色區塊"] .tox-collection__item-label { background-color: rgba(220, 53, 69, 0.08) !important; border: 2px dashed #dc3545 !important; border-radius: 8px !important; }
.tox-collection__item[aria-label="🟤 棕色區塊"] .tox-collection__item-label { background-color: rgba(139, 69, 19, 0.08) !important; border: 2px dashed #8b4513 !important; border-radius: 8px !important; }

/* 🖍️ 質感半高螢光筆選單預覽 */
.tox-collection__item[aria-label="🟡 質感半高黃"] .tox-collection__item-label { background: linear-gradient(to top, rgba(255, 235, 59, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }
.tox-collection__item[aria-label="🟢 質感半高綠"] .tox-collection__item-label { background: linear-gradient(to top, rgba(74, 222, 128, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }
.tox-collection__item[aria-label="🔵 質感半高藍"] .tox-collection__item-label { background: linear-gradient(to top, rgba(56, 189, 248, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }
.tox-collection__item[aria-label="🔴 質感半高紅"] .tox-collection__item-label { background: linear-gradient(to top, rgba(244, 114, 182, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }
.tox-collection__item[aria-label="🟣 質感半高紫"] .tox-collection__item-label { background: linear-gradient(to top, rgba(192, 132, 252, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }
.tox-collection__item[aria-label="🟠 質感半高橘"] .tox-collection__item-label { background: linear-gradient(to top, rgba(251, 146, 60, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }
.tox-collection__item[aria-label="🟤 質感半高棕"] .tox-collection__item-label { background: linear-gradient(to top, rgba(162, 114, 82, 0.6) 40%, transparent 40%) !important; border-radius: 2px !important; }

/* 🟡 柔和全高螢光筆選單預覽 */
.tox-collection__item[aria-label="🟡 柔黃螢光筆"] .tox-collection__item-label { background-color: rgba(255, 235, 59, 0.35) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🟢 柔綠螢光筆"] .tox-collection__item-label { background-color: rgba(74, 222, 128, 0.3) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🔵 柔藍螢光筆"] .tox-collection__item-label { background-color: rgba(56, 189, 248, 0.3) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🔴 柔紅螢光筆"] .tox-collection__item-label { background-color: rgba(248, 113, 113, 0.3) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🟣 柔紫螢光筆"] .tox-collection__item-label { background-color: rgba(192, 132, 252, 0.3) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🟠 柔橘螢光筆"] .tox-collection__item-label { background-color: rgba(251, 146, 60, 0.3) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="🟤 柔棕螢光筆"] .tox-collection__item-label { background-color: rgba(162, 114, 82, 0.3) !important; border-radius: 4px !important; }
.tox-collection__item[aria-label="⚪ 冷灰螢光筆"] .tox-collection__item-label { background-color: rgba(148, 163, 184, 0.25) !important; border-radius: 4px !important; }


/* ✨ 文字特殊樣式選單預覽 */
.tox-collection__item[aria-label*="鍵盤按鍵"] .tox-collection__item-label {
    background-color: var(--kbd-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 0 var(--border-color) !important;
    width: auto !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

.tox-collection__item[aria-label*="行內程式碼"] .tox-collection__item-label {
    background-color: var(--code-header-bg) !important;
    color: var(--box-accent-warning) !important;
    border: 1px solid var(--border-color) !important;
    font-family: monospace !important;
    width: auto !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

.tox-collection__item[aria-label*="下底波浪線"] .tox-collection__item-label {
    text-decoration: underline wavy #ef4444 !important;
    text-underline-offset: 4px !important;
}

.tox-collection__item[aria-label*="下底虛線"] .tox-collection__item-label {
    border-bottom: 2px dashed #38bdf8 !important;
    border-radius: 0 !important;
}

.tox-collection__item[aria-label*="劇透防雷"] .tox-collection__item-label {
    background-color: var(--text-color) !important;
    color: var(--text-color) !important;
    width: auto !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

.tox-collection__item[aria-label*="彩虹漸層字"] .tox-collection__item-label {
    background-image: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    width: auto !important;
    display: inline-block !important;
    font-weight: bold !important;
}

.tox-collection__item[aria-label*="夕陽暖金字"] .tox-collection__item-label {
    background-image: linear-gradient(to right, #f43f5e, #f97316, #eab308) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    width: auto !important;
    display: inline-block !important;
    font-weight: bold !important;
}

.tox-collection__item[aria-label*="極光青紫字"] .tox-collection__item-label {
    background-image: linear-gradient(to right, #06b6d4, #3b82f6, #9333ea) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    width: auto !important;
    display: inline-block !important;
    font-weight: bold !important;
}

.tox-collection__item[aria-label*="圓角小標籤"] .tox-collection__item-label {
    background-color: var(--hover-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    width: auto !important;
    display: inline-block !important;
    padding: 2px 8px !important;
}

.tox-collection__item[aria-label*="霓虹發光字"] .tox-collection__item-label {
    color: #38bdf8 !important;
    text-shadow: 0 0 5px #0284c7, 0 0 10px #0284c7 !important;
    width: auto !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

.tox-collection__item[aria-label*="立體雕刻字"] .tox-collection__item-label {
    color: #94a3b8 !important;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #334155 !important;
    width: auto !important;
    display: inline-block !important;
}

.tox-collection__item[aria-label*="3D 模擬按鈕"] .tox-collection__item-label {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    width: auto !important;
    display: inline-block !important;
}

.tox-collection__item[aria-label*="放大鏡重點"] .tox-collection__item-label {
    font-size: 1.1em !important;
    font-weight: 900 !important;
    color: var(--box-accent-error) !important;
    width: auto !important;
    display: inline-block !important;
}


/* ==========================================================================
   12. 【隱藏官方促銷升級按鈕 (Get all features)】
   ========================================================================== */
.tox-promotion,
.tox .tox-promotion,
.tox-tinymce .tox-promotion {
    display: none !important;
}

/* ==========================================================================
   13. 【✨ TinyMCE 對話框 (tox-dialog) 簡潔透明背景 UI】
   ========================================================================== */
.tox .tox-dialog-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

.tox .tox-dialog-wrap__backdrop {
    background-color: transparent !important;
    background: transparent !important;
    opacity: 0 !important;
}

.tox .tox-dialog {

    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.1) !important;
    overflow: hidden !important;
    color: #f8fafc !important;
}

/* 💻 程式碼彈窗與大型對話框加寬加大 */
.tox .tox-dialog--width-lg,
.tox .tox-dialog[aria-label*="程式碼"],
.tox .tox-dialog[aria-label*="Codesample"] {
    max-width: 900px !important;
    width: 900px !important;
}


@keyframes toxDialogPopIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 🏷️ 彈窗 Header 標題列 */
.tox .tox-dialog__header {
    background: #0f172a !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.tox .tox-dialog__title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
}




/* 📄 彈窗內容本體 (防跑版與移除水平捲軸) */
.tox .tox-dialog {
    min-width: 520px !important;
    box-sizing: border-box !important;
}

.tox .tox-dialog__body {
    background: #1e293b !important;
    padding: 20px 24px !important;
    color: #e2e8f0 !important;
    overflow-x: hidden !important;
}

.tox .tox-dialog__body-content {
    padding: 0 !important;
    overflow-x: hidden !important;
}

.tox .tox-form__group {
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
}

/* 複合輸入列 (例如網址列 + 側邊按鈕) */
.tox .tox-form__controls-h-stacked {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tox .tox-form__controls-h-stacked .tox-textfield {
    flex: 1 1 auto !important;
    width: auto !important;
}

.tox .tox-form__controls-h-stacked .tox-button {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
}

/* 📝 標籤文字 (Labels) */
.tox .tox-label,
.tox .tox-form__label {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.3px !important;
    display: block !important;
}

/* 🔲 輸入框 (Input & Textarea & Select) */
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-listboxfield .tox-listbox--select {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 9px 12px !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: all 0.2s ease !important;
}

.tox .tox-textfield:focus,
.tox .tox-textarea:focus,
.tox .tox-listboxfield .tox-listbox--select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    outline: none !important;
}


/* 複選框 Checkbox */
.tox .tox-checkbox__input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0284c7 !important;
    cursor: pointer !important;
}

.tox .tox-checkbox__label {
    font-size: 0.95rem !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* 🦶 彈窗底部 Footer 按鈕列 */
.tox .tox-dialog__footer {
    background: #0f172a !important;
    padding: 14px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* 🔘 主要按鈕 (Submit / Primary) */
.tox .tox-button,
.tox .tox-button:default {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 9px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tox .tox-button:hover,
.tox .tox-button:default:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.45) !important;
    transform: translateY(-1px) !important;
}

.tox .tox-button--naked {
    background: transparent !important;
    border: transparent !important;
    box-shadow: unset !important;
    color: #fff !important;
    padding: 0 !important;
}

/* 🔘 次要 / 取消按鈕 (Secondary) */
.tox .tox-button--secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

.tox .tox-button--secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* 😊 表情符號 (Emoji) & 特殊字元 (Charmap) 專屬加寬與移除底部多餘關閉按鈕 */
.tox .tox-dialog:has(.tox-collection--emoticons),
.tox .tox-dialog:has(.tox-collection--charmap),
.tox .tox-dialog[aria-label*="Emoji"],
.tox .tox-dialog[aria-label*="特殊字元"],
.tox .tox-dialog[aria-label*="Charmap"] {
    max-width: 840px !important;
    width: 840px !important;
}

/* 隱藏 Emoji 與特殊字元彈窗下方的多餘「關閉」Footer */
.tox .tox-dialog:has(.tox-collection--emoticons) .tox-dialog__footer,
.tox .tox-dialog:has(.tox-collection--charmap) .tox-dialog__footer,
.tox .tox-dialog[aria-label*="Emoji"] .tox-dialog__footer,
.tox .tox-dialog[aria-label*="特殊字元"] .tox-dialog__footer,
.tox .tox-dialog[aria-label*="Charmap"] .tox-dialog__footer {
    display: none !important;
}

.tox .tox-navobj {
    border-radius: 8px !important;
}

.tox .tox-dialog__pop {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
}

.tox .tox-dialog__pop--left::before,
.tox .tox-dialog__pop--right::before {
    border-color: #0f172a transparent transparent transparent !important;
}

/* ==========================================================================
   🏷️【文字標籤與螢光筆選擇面板：緊湊 8 欄網格與無干擾暗色按鈕 (無 hover / focus 光圈)】
   ========================================================================== */
.tox .tox-dialog[aria-label*="文字標籤"],
.tox .tox-dialog[aria-label*="螢光筆"] {
    width: 480px !important;
    max-width: 92vw !important;
}

.tox .tox-dialog[aria-label*="文字標籤"] .tox-dialog__body-content,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-dialog__body-content {
    padding: 16px 20px !important;
    overflow-y: hidden !important;
}

.tox .tox-dialog[aria-label*="文字標籤"] .tox-form__grid,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-form__grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tox .tox-dialog[aria-label*="文字標籤"] .tox-form__grid .tox-button,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-form__grid .tox-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    font-size: 18px !important;
    width: 100% !important;
    height: 42px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transform: none !important;
    transition: none !important;
    outline: none !important;
}

/* 徹底移除 hover / focus / active 的藍色光圈、外發光與位移 */
.tox .tox-dialog[aria-label*="文字標籤"] .tox-form__grid .tox-button:hover,
.tox .tox-dialog[aria-label*="文字標籤"] .tox-form__grid .tox-button:focus,
.tox .tox-dialog[aria-label*="文字標籤"] .tox-form__grid .tox-button:focus-visible,
.tox .tox-dialog[aria-label*="文字標籤"] .tox-form__grid .tox-button:active,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-form__grid .tox-button:hover,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-form__grid .tox-button:focus,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-form__grid .tox-button:focus-visible,
.tox .tox-dialog[aria-label*="螢光筆"] .tox-form__grid .tox-button:active {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}




/* ==========================================================================
   🏷️【文字標籤樣式 (Inline Tag & Dynamic Data-Icon)】
   ========================================================================== */
span[data-icon]::before,
.tinymce-scope span[data-icon]::before {
    content: attr(data-icon) " ";
    margin-right: 0.5em;
    font-style: normal;
}

span.custom-inline-tinymce,
.tinymce-scope span.custom-inline-tinymce {
    border-radius: 4px;
    font-weight: 500;
    display: inline;
}

/* 修復標籤為空或僅佔位符時的隱藏規則 */
.tinymce-scope span[data-icon]:empty,
.tinymce-scope span[data-icon]:has(> br),
.tinymce-scope span[data-icon]:has(> br[data-mce-bogus]),
span[data-icon]:empty::before,
span[data-icon]:has(> br)::before,
span[data-icon]:has(> br[data-mce-bogus])::before {
    display: none !important;
    content: "" !important;
}

/* 標籤文字段落：清單式懸掛縮排 (Hanging Indent) 效果 */
.tinymce-scope p:has(> span[data-icon]:first-child),
.tinymce-scope p:has(> span.custom-inline-tinymce:first-child),
.tinymce-scope h1:has(> span[data-icon]:first-child),
.tinymce-scope h2:has(> span[data-icon]:first-child),
.tinymce-scope h3:has(> span[data-icon]:first-child),
.tinymce-scope h4:has(> span[data-icon]:first-child),
.tinymce-scope h5:has(> span[data-icon]:first-child),
.tinymce-scope h6:has(> span[data-icon]:first-child),
.tinymce-scope li:has(> span[data-icon]:first-child),
p:has(> span[data-icon]:first-child),
h1:has(> span[data-icon]:first-child),
h2:has(> span[data-icon]:first-child),
h3:has(> span[data-icon]:first-child),
h4:has(> span[data-icon]:first-child),
h5:has(> span[data-icon]:first-child),
h6:has(> span[data-icon]:first-child),
li:has(> span[data-icon]:first-child) {
    padding-left: var(--tag-indent, 1.8em);
    text-indent: calc(-1 * var(--tag-indent, 1.8em));
}

/* ==========================================================================
   🌙【SweetAlert2 暗色風格彈窗專屬樣式】
   ========================================================================== */
.swal2-popup.swal2-dark-custom {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.2) !important;
    color: #f8fafc !important;
}

.swal2-popup.swal2-dark-custom .swal2-title {
    color: #f8fafc !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.swal2-popup.swal2-dark-custom .swal2-html-container {
    color: #cbd5e1 !important;
}

.swal2-popup.swal2-dark-custom .swal2-input {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.swal2-popup.swal2-dark-custom .swal2-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

/* ==========================================================================
   16. 【📱 手機版 / 窄螢幕 TinyMCE 工具列水平順暢滑動 (方案 A：Horizontal Scroll)】
   ========================================================================== */
.tox.tox-tinymce .tox-toolbar,
.tox.tox-tinymce .tox-toolbar__primary,
.tox.tox-tinymce .tox-toolbar__overflow {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tox.tox-tinymce .tox-toolbar::-webkit-scrollbar,
.tox.tox-tinymce .tox-toolbar__primary::-webkit-scrollbar,
.tox.tox-tinymce .tox-toolbar__overflow::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.tox.tox-tinymce .tox-toolbar__group {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    padding: 0 4px !important;
}