/*
 * DevToolbox 樣式：在 Bootstrap 5.3 之上補充的設計規範。
 * 配色：深藍導覽列、品牌藍、淺灰背景、白色卡片、柔和邊框。
 * 字型：全部使用作業系統內建字型，不載入字型檔（速度最快）。
 * 版面寬度：首頁與頁尾 1180px、工具操作區 1440px、文章與 FAQ 800px。
 */

/* ===== 設計變數 ===== */
:root {
    --dt-navy: #0f172a;
    --dt-brand: #2563eb;
    --dt-brand-hover: #1d4ed8;
    --dt-brand-active: #1e40af;
    --dt-brand-soft: #eff6ff;
    --dt-bg: #f8fafc;
    --dt-surface: #ffffff;
    --dt-border: #e2e8f0;
    --dt-text: #0f172a;
    --dt-body: #334155;
    --dt-muted: #64748b;
    --dt-radius: 12px;
    --dt-font-zh-hant: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC";
    --dt-font-zh-hans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC";
    --dt-font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP";

    /* 套用到 Bootstrap */
    --bs-body-bg: var(--dt-bg);
    --bs-body-color: var(--dt-body);
    --bs-emphasis-color: var(--dt-text);
    --bs-secondary-color: var(--dt-muted);
    --bs-border-color: var(--dt-border);
    --bs-border-radius: 8px;
    --bs-primary: var(--dt-brand);
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: var(--dt-brand);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--dt-brand-hover);
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--dt-font-zh-hant), sans-serif;
    --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 中文頁面優先使用對應的中文字型（繁體：蘋方-繁、微軟正黑體；簡體：蘋方-簡、微軟雅黑） */
html:lang(zh-TW) { --bs-body-font-family: -apple-system, var(--dt-font-zh-hant), system-ui, "Segoe UI", Roboto, sans-serif; }
html:lang(zh-CN) { --bs-body-font-family: -apple-system, var(--dt-font-zh-hans), system-ui, "Segoe UI", Roboto, sans-serif; }
/* 日文優先使用日文字型（ヒラギノ、游ゴシック、メイリオ），漢字字形才會是日本的寫法 */
html:lang(ja) { --bs-body-font-family: -apple-system, var(--dt-font-ja), system-ui, "Segoe UI", Roboto, sans-serif; }

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--dt-text); }

/* ===== Bootstrap 元件配色 ===== */
.btn-primary {
    --bs-btn-bg: var(--dt-brand);
    --bs-btn-border-color: var(--dt-brand);
    --bs-btn-hover-bg: var(--dt-brand-hover);
    --bs-btn-hover-border-color: var(--dt-brand-hover);
    --bs-btn-active-bg: var(--dt-brand-active);
    --bs-btn-active-border-color: var(--dt-brand-active);
    --bs-btn-disabled-bg: var(--dt-brand);
    --bs-btn-disabled-border-color: var(--dt-brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--dt-brand);
    --bs-btn-border-color: var(--dt-brand);
    --bs-btn-hover-bg: var(--dt-brand);
    --bs-btn-hover-border-color: var(--dt-brand);
    --bs-btn-active-bg: var(--dt-brand-hover);
    --bs-btn-active-border-color: var(--dt-brand-hover);
}
.btn-outline-secondary {
    --bs-btn-color: var(--dt-body);
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-bg: var(--dt-surface);
    --bs-btn-hover-color: var(--dt-text);
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: var(--dt-text);
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: #94a3b8;
}
.form-control:focus, .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.form-check-input:checked { background-color: var(--dt-brand); border-color: var(--dt-brand); }
.form-check-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--dt-brand);
    --bs-dropdown-border-color: var(--dt-border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
}

/* ===== 圖示 ===== */
.dt-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }

/* ===== 版面寬度 ===== */
.dt-home { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.dt-workspace { max-width: 1440px; margin: 0 auto; padding: 24px; }
.dt-article { max-width: 800px; margin: 64px auto 0; padding: 0 24px; }
@media (max-width: 767.98px) {
    .dt-home, .dt-article { padding-left: 16px; padding-right: 16px; }
    .dt-workspace { padding: 16px; }
    .dt-article { margin-top: 40px; }
}

/* ===== 導覽列 ===== */
.dt-navbar { background: var(--dt-navy); }
.dt-navbar .navbar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: -.01em; }
.dt-navbar .nav-link { color: #cbd5e1; }
.dt-navbar .nav-link:hover, .dt-navbar .nav-link:focus, .dt-navbar .nav-link.active, .dt-navbar .nav-link.show { color: #fff; }
.dt-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--dt-brand); color: #fff; font-size: 15px;
}
.dt-lang-btn { --bs-btn-color: #e2e8f0; --bs-btn-border-color: #334155; --bs-btn-hover-bg: #1e293b; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #1e293b; }

/* ===== 首頁 Hero 與搜尋 ===== */
.dt-hero { text-align: center; padding: 72px 0 48px; }
.dt-hero h1 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 1rem; }
.dt-hero-lead { max-width: 640px; margin: 0 auto 2rem; font-size: 1.125rem; color: var(--dt-muted); line-height: 1.7; }
.dt-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.dt-badge {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .75rem; border: 1px solid var(--dt-border); border-radius: 999px;
    background: var(--dt-surface); color: var(--dt-body); font-size: .8125rem; font-weight: 500;
}
.dt-badge .dt-icon { color: var(--dt-brand); }
.dt-search { position: relative; max-width: 560px; margin: 0 auto; }
.dt-search .dt-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--dt-muted); pointer-events: none; }
.dt-search input {
    height: 52px; padding: 0 4.5rem 0 2.75rem; border-radius: var(--dt-radius);
    font-size: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dt-search kbd {
    position: absolute; right: .875rem; top: 50%; transform: translateY(-50%);
    padding: .125rem .5rem; border: 1px solid var(--dt-border); border-radius: 6px;
    background: var(--dt-bg); color: var(--dt-muted); font-size: .75rem; font-family: var(--bs-body-font-family);
}

/* ===== 分類與工具卡片 ===== */
.dt-category { margin-bottom: 3rem; }
.dt-category-header { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.dt-category-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.dt-category-header .dt-icon { color: var(--dt-brand); font-size: 1.125rem; }
.dt-count { color: var(--dt-muted); font-size: .875rem; }
.dt-tool-card {
    display: flex; flex-direction: column; height: 100%; padding: 24px;
    background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
    color: inherit; text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dt-tool-card:hover, .dt-tool-card:focus-visible {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    color: inherit;
}
.dt-tool-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 10px;
    background: var(--dt-brand-soft); color: var(--dt-brand); font-size: 20px;
}
.dt-tool-card h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: .375rem; }
.dt-tool-card p { color: var(--dt-muted); font-size: .9rem; line-height: 1.6; margin-bottom: 1rem; flex-grow: 1; }
.dt-tool-card .dt-open { display: inline-flex; align-items: center; gap: .375rem; color: var(--dt-brand); font-size: .875rem; font-weight: 500; }
.dt-tool-card:hover .dt-open .dt-icon { transform: translateX(3px); }
.dt-open .dt-icon { transition: transform .2s; }
.dt-search-empty { text-align: center; color: var(--dt-muted); padding: 2rem 0; }

/* ===== 工具頁 ===== */
.dt-tool-title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: .375rem; }
.dt-tool-lead { color: var(--dt-muted); margin-bottom: 1.25rem; max-width: 900px; }
.dt-tabs-wrap { position: relative; margin-bottom: 1.5rem; }
.dt-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--dt-border); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.dt-tabs::-webkit-scrollbar { display: none; }
/* 左右還有分頁時，該側邊緣淡出並顯示箭頭按鈕，提示可以滑動（class 由 devtoolbox.js 依捲動位置切換在 .dt-tabs-wrap） */
.dt-tabs {
    --dt-tabs-fade-left: 0px; --dt-tabs-fade-right: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--dt-tabs-fade-left), #000 calc(100% - var(--dt-tabs-fade-right)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--dt-tabs-fade-left), #000 calc(100% - var(--dt-tabs-fade-right)), transparent);
}
.has-more-left > .dt-tabs { --dt-tabs-fade-left: 4rem; }
.has-more-right > .dt-tabs { --dt-tabs-fade-right: 4rem; }
.dt-tabs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); display: none;
    align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
    border: 1px solid var(--dt-border); border-radius: 50%; background: var(--dt-surface);
    color: var(--dt-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.dt-tabs-arrow:hover { color: var(--dt-brand); border-color: var(--dt-brand); }
.dt-tabs-arrow-left { left: 0; }
.dt-tabs-arrow-right { right: 0; }
.has-more-left > .dt-tabs-arrow-left, .has-more-right > .dt-tabs-arrow-right { display: inline-flex; }
.dt-tabs a {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .625rem .875rem; margin-bottom: -1px; border-bottom: 2px solid transparent;
    color: var(--dt-muted); font-size: .9375rem; text-decoration: none;
}
.dt-tabs a:hover { color: var(--dt-text); }
.dt-tabs a.active { color: var(--dt-brand); border-bottom-color: var(--dt-brand); font-weight: 600; }
.code-area {
    height: clamp(280px, 60vh, 720px); min-height: 200px; resize: vertical;
    font-family: var(--bs-font-monospace); font-size: 13px; line-height: 1.6;
    border-radius: 10px; background: var(--dt-surface);
}
#message { min-height: 1.5rem; }
/* 複製成功時按鈕短暫變成「已複製」 */
.btn.is-done { --bs-btn-color: #15803d; --bs-btn-border-color: #86efac; --bs-btn-bg: #f0fdf4; --bs-btn-hover-color: #15803d; --bs-btn-hover-bg: #dcfce7; --bs-btn-hover-border-color: #86efac; }
.pane-header { min-height: 31px; }
@media (max-width: 767.98px) { .code-area { height: max(240px, 40vh); } }

/* 程式碼編輯區（code-editor.js）：透明的 textarea 疊在上色的 <pre> 上，兩者字型、內距必須完全相同 */
.code-editor {
    display: flex; overflow: hidden;
    border: 1px solid var(--dt-border); color: var(--dt-text);
}
.code-editor:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.code-editor-gutter {
    flex-shrink: 0; overflow: hidden; padding: 10px 10px 10px 12px; min-width: 3em;
    border-right: 1px solid var(--dt-border); background: #f8fafc;
    color: #64748b; text-align: right; user-select: none;
}
.code-editor-lines { white-space: pre; }
.code-editor-body { position: relative; flex-grow: 1; min-width: 0; }
.code-editor-highlight, .code-editor textarea {
    position: absolute; inset: 0; margin: 0; padding: 10px 12px;
    font: inherit; line-height: inherit; letter-spacing: normal; tab-size: 4;
    font-variant-ligatures: none; white-space: pre; overflow-wrap: normal; word-break: normal;
}
.code-editor-highlight { overflow: hidden; pointer-events: none; color: inherit; background: none; }
.code-editor-highlight code { display: block; font: inherit; color: inherit; }
/* 每行一個 div；空行補一個零寬字元撐出行高，否則高度為 0，換行模式量不到 */
.code-editor-highlight code > div:empty::before { content: "\200b"; }
/* 自動換行：兩層必須用完全相同的換行規則 */
.code-editor.is-wrap .code-editor-highlight, .code-editor.is-wrap textarea { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-editor.is-wrap textarea { overflow-x: hidden; }
/* 加上 :focus 是為了蓋過 Bootstrap 的 .form-control:focus（它會把文字與背景改回不透明） */
.code-editor textarea, .code-editor textarea:focus {
    width: 100%; height: 100%; overflow: auto; resize: none;
    border: 0; border-radius: 0; background: transparent; box-shadow: none !important;
    color: transparent; caret-color: var(--dt-text);
}
.code-editor textarea::placeholder { color: var(--dt-muted); opacity: 1; }
.code-editor textarea::selection { background: rgba(37, 99, 235, .25); }
/* 內容太大不上色時，直接顯示 textarea 本身的文字 */
.code-editor.is-plain textarea { color: var(--dt-text); }
/* 標示：error 紅、fix 綠。外框用 box-shadow 而不用 border，才不會占寬度、讓文字跟 textarea 對不齊 */
.code-editor-mark { padding: 0; border-radius: 2px; color: inherit; }
.code-editor-mark.is-error { background: rgba(220, 38, 38, .2); box-shadow: 0 0 0 1px #dc2626; }
.code-editor-mark.is-fix { background: rgba(22, 163, 74, .2); box-shadow: 0 0 0 1px #16a34a; }
.code-editor-point { display: inline-block; width: 0; height: 1.2em; padding: 0; vertical-align: text-bottom; background: none; }
.code-editor-point.is-error { box-shadow: 0 0 0 1px #dc2626; }
.code-editor-point.is-fix { box-shadow: 0 0 0 1px #16a34a; }
/* 正規表示式的符合處：相鄰兩個用不同顏色，才分得出是兩段 */
.code-editor-mark.is-match { background: rgba(37, 99, 235, .16); box-shadow: 0 0 0 1px rgba(37, 99, 235, .55); }
.code-editor-mark.is-match-alt { background: rgba(217, 119, 6, .18); box-shadow: 0 0 0 1px rgba(217, 119, 6, .6); }
.tok-key { color: #1d4ed8; }
.tok-string { color: #15803d; }
.tok-number { color: #c2410c; }
.tok-literal { color: #7c3aed; font-weight: 600; }
.tok-punct { color: #64748b; }
.tok-comment { color: #64748b; font-style: italic; }

/* ===== 檔案輸入（file-input.js）：資訊卡與拖曳提示 ===== */
[data-pane="input"] { position: relative; }
.dt-file-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    padding: 24px; border: 1px dashed #cbd5e1; text-align: center; font-family: var(--bs-body-font-family);
}
.dt-file-card .dt-icon { font-size: 2.5rem; color: var(--dt-brand); }
.dt-drop-hint {
    display: none; position: absolute; inset: 39px 0 0; z-index: 2;
    align-items: center; justify-content: center;
    border: 2px dashed var(--dt-brand); border-radius: 10px; background: rgba(239, 246, 255, .92);
    color: var(--dt-brand); font-weight: 600; pointer-events: none;
}
.is-dragover .dt-drop-hint { display: flex; }

/* ===== JSON 樹狀檢視（json-tree.js） ===== */
.dt-tree { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dt-border); }
.dt-tree-toolbar, .dt-tree-footer { display: flex; align-items: center; gap: .5rem; padding: 8px; background: #f8fafc; }
.dt-tree-toolbar { border-bottom: 1px solid var(--dt-border); }
.dt-tree-footer { border-top: 1px solid var(--dt-border); }
.dt-tree-toolbar input { min-width: 0; flex: 1 1 auto; }
.dt-tree-footer code { flex: 1 1 auto; min-width: 0; color: var(--dt-text); }
.dt-tree-body, .dt-tree-empty { flex: 1 1 auto; overflow: auto; padding: 6px 0; }
.dt-tree-empty { padding: 16px; }
.dt-tree-row { padding: 1px 8px 1px 4px; cursor: default; white-space: nowrap; outline: none; }
.dt-tree-row:hover { background: #f1f5f9; }
.dt-tree-row.is-match { background: #fef9c3; }
.dt-tree-row.is-current { background: #fde047; }
.dt-tree-row.is-selected { box-shadow: inset 2px 0 0 var(--dt-brand); background: var(--dt-brand-soft); }
.dt-tree-row:focus-visible { box-shadow: inset 0 0 0 2px #93c5fd; }
.dt-tree-toggle { display: inline-block; width: 16px; color: var(--dt-muted); cursor: pointer; text-align: center; }
.dt-tree-more { padding-top: 0; padding-bottom: 0; font-size: 12px; }
@media (max-width: 767.98px) { .dt-tree-toolbar { flex-wrap: wrap; } }

/* ===== 網址解析表格 ===== */
.dt-url-parts { padding: 16px; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface); }
.dt-url-parts .table { --bs-table-bg: transparent; font-size: .875rem; }
.dt-url-parts td:first-child { width: 1%; }

/* ===== 一般面板（時間戳記、JWT、JSON 比對的結果區） ===== */
.dt-panel { padding: 16px; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface); }
.dt-result-table { --bs-table-bg: transparent; font-size: .875rem; }
.dt-result-table td:first-child { width: 1%; }
.dt-now-value { font-size: 1.125rem; color: var(--dt-text); font-variant-numeric: tabular-nums; }

/* ===== JWT ===== */
.dt-jwt-input { height: 220px; min-height: 120px; word-break: break-all; }
.dt-jwt-header { height: 140px; min-height: 100px; }
.dt-jwt-payload { height: 260px; min-height: 120px; }
.dt-jwt-status { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: .9375rem; }
.dt-jwt-status.is-ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.dt-jwt-status.is-bad { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.dt-jwt-status.is-info { background: #f8fafc; color: var(--dt-body); border: 1px solid var(--dt-border); }

/* ===== JSON 比對 ===== */
.dt-diff-area { height: clamp(240px, 45vh, 560px); }
.dt-diff-table { --bs-table-bg: transparent; font-size: .8125rem; }
.dt-diff-row { cursor: pointer; }
.dt-diff-row:hover, .dt-diff-row:focus { --bs-table-bg: #f1f5f9; outline: none; }
.dt-diff-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.dt-diff-kind.is-added { background: #dcfce7; color: #15803d; }
.dt-diff-kind.is-removed { background: #fee2e2; color: #b91c1c; }
.dt-diff-kind.is-changed { background: #fef3c7; color: #b45309; }
.dt-diff-before { color: #b91c1c; }
.dt-diff-after { color: #15803d; }

/* ===== 說明文章、FAQ、固定頁面 ===== */
.dt-article { font-size: 1rem; line-height: 1.85; color: var(--dt-body); }
.dt-article h1 { font-size: clamp(1.75rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1.5rem; }
.dt-article h2 { font-size: 1.375rem; font-weight: 700; margin: 2.5rem 0 1rem; }
.dt-article h2:first-child { margin-top: 0; }
.dt-article h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.dt-article ol, .dt-article ul { padding-left: 1.5rem; }
.dt-article li { margin-bottom: .375rem; }
.dt-article code {
    padding: .125rem .375rem; border-radius: 4px; background: #f1f5f9; color: #be185d;
    font-size: .875em; word-break: break-word;
}
.dt-article pre {
    padding: 1rem 1.25rem; border-radius: 10px; background: var(--dt-navy); color: #e2e8f0;
    font-size: .875rem; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
}
.dt-article table { font-size: .9375rem; }
.dt-article .table { --bs-table-bg: var(--dt-surface); }
.dt-article .table th { background: #f1f5f9; color: var(--dt-text); font-weight: 600; }
/* FAQ：原生 <details> 可展開，不需要 JS，收合的內容搜尋引擎仍讀得到 */
.dt-faq { border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface); overflow: hidden; }
.dt-faq details + details { border-top: 1px solid var(--dt-border); }
/* 不用 flex：問題裡有 <code> 時，flex 會把文字與程式碼拆成獨立區塊分散排列 */
.dt-faq summary {
    position: relative; display: block;
    padding: 1rem 3rem 1rem 1.25rem; cursor: pointer; list-style: none;
    color: var(--dt-text); font-weight: 600;
}
.dt-faq summary::-webkit-details-marker { display: none; }
.dt-faq summary::after {
    content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
    color: var(--dt-muted); font-size: 1.25rem; font-weight: 400; line-height: 1;
}
.dt-faq details[open] summary::after { content: "\2212"; }
.dt-faq summary:hover { background: #f8fafc; }
.dt-faq .dt-faq-answer { padding: 0 1.25rem 1rem; }
.dt-faq .dt-faq-answer > :last-child { margin-bottom: 0; }

/* ===== 相關工具 ===== */
.dt-related { margin-top: 64px; }
.dt-related h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }

/* ===== 頁尾 ===== */
.dt-footer { margin-top: 96px; padding: 48px 0 24px; border-top: 1px solid var(--dt-border); background: var(--dt-surface); font-size: .9rem; }
.dt-footer h2 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dt-text); margin-bottom: .875rem; }
.dt-footer ul { list-style: none; padding: 0; margin: 0; }
.dt-footer li { margin-bottom: .5rem; }
.dt-footer a { color: var(--dt-muted); text-decoration: none; }
.dt-footer a:hover { color: var(--dt-brand); }
.dt-footer-about { max-width: 320px; }
.dt-footer-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--dt-text); margin-bottom: .75rem; }
.dt-footer-bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--dt-border); color: var(--dt-muted); font-size: .8125rem; }

/* ===== 找不到頁面 ===== */
.dt-not-found { text-align: center; padding: 72px 0 48px; }
.dt-not-found .dt-code { font-size: 4.5rem; font-weight: 800; color: #cbd5e1; line-height: 1; margin-bottom: 1rem; }

/* ===== 假圖片預覽：棋盤格底色用來顯示透明背景 ===== */
.preview-box { min-height: 300px; max-height: 70vh; overflow: auto; }
.checkerboard {
    background-color: #fff;
    background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
#previewCanvas { max-height: calc(70vh - 2rem); object-fit: contain; }

/* ===== UUID ===== */
.dt-uuid-count { width: 7rem; }

/* ===== QR Code ===== */
.dt-qr-text { height: 120px; resize: vertical; }
/* 有外框文字時圖片比較高，高度依比例 */
.dt-qr-preview { width: 100%; max-width: 320px; height: auto; border: 1px solid var(--dt-border); border-radius: 8px; }
.dt-qr-payload { white-space: pre-wrap; word-break: break-all; padding: 8px; border-radius: 6px; background: #f8fafc; }

/* ===== 正規表示式 ===== */
.dt-regex-matches { height: clamp(280px, 60vh, 720px); min-height: 200px; overflow: auto; }
.dt-regex-cell { white-space: pre-wrap; word-break: break-all; }
.dt-regex-result { height: 120px; resize: vertical; font-size: 13px; }
@media (max-width: 767.98px) { .dt-regex-matches { height: auto; max-height: 50vh; } }

/* ===== PDF 工具（pdf-workspace.js）：選檔區、檔案列表、頁面縮圖 ===== */
.dt-pdf-workspace { position: relative; }
.dt-pdf-workspace .dt-pdf-drop-hint { inset: 0; z-index: 5; }
.dt-pdf-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    min-height: 280px; padding: 32px 16px; text-align: center;
    border: 2px dashed #cbd5e1; border-radius: var(--dt-radius); background: var(--dt-surface);
}
.dt-pdf-drop-icon { font-size: 3rem; color: #dc2626; }
.dt-pdf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.dt-pdf-toolbar-sep { width: 1px; height: 1.5rem; background: var(--dt-border); }
.dt-pdf-filebar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: 10px 14px;
    border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface);
}
.dt-pdf-filebar > .dt-icon { color: #dc2626; font-size: 1.25rem; }
.dt-pdf-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--dt-text); }
.dt-pdf-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1rem; }
.dt-pdf-actions .form-label { flex-basis: 100%; }
.dt-pdf-name { width: auto; flex: 0 1 320px; }
.dt-pdf-mode-options { margin: .375rem 0 .75rem 1.5rem; }
.dt-pdf-grip { display: inline-flex; color: var(--dt-muted); cursor: grab; touch-action: none; padding: 4px 2px; }

/* 合併：檔案列表 */
.dt-pdf-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.dt-pdf-file {
    display: flex; align-items: center; gap: .75rem; padding: 8px 12px;
    border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface);
    user-select: none;
}
.dt-pdf-file:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .25); }
.dt-pdf-file-thumb { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; height: 64px; }
.dt-pdf-file-thumb canvas { max-width: 48px; max-height: 64px; }
.dt-pdf-file-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dt-pdf-file-pages { flex: 0 0 200px; }
.dt-pdf-file-buttons { display: flex; gap: .25rem; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .dt-pdf-file { flex-wrap: wrap; }
    .dt-pdf-file-info { flex-basis: calc(100% - 120px); }
    .dt-pdf-file-pages { flex: 1 1 auto; }
}

/* 分割、整理：頁面縮圖 */
.dt-pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.dt-pdf-page {
    position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 8px 8px 4px;
    border: 2px solid var(--dt-border); border-radius: 10px; background: var(--dt-surface);
    color: inherit; font: inherit; text-align: center; user-select: none;
}
.dt-pdf-grid.is-selectable .dt-pdf-page { cursor: pointer; }
.dt-pdf-grid.is-selectable .dt-pdf-page:hover { border-color: #bfdbfe; }
.dt-pdf-page.is-selected, .dt-pdf-grid.is-selectable .dt-pdf-page.is-selected { border-color: var(--dt-brand); background: var(--dt-brand-soft); }
.dt-pdf-page:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .25); }
.dt-pdf-page-thumb { display: flex; align-items: center; justify-content: center; height: 150px; }
.dt-pdf-canvas { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }
.dt-pdf-page-number { font-size: .8125rem; color: var(--dt-muted); padding: 4px 0; font-variant-numeric: tabular-nums; }
.dt-pdf-page-bar { display: flex; align-items: center; gap: 2px; }
.dt-pdf-page-bar .dt-pdf-page-number { flex: 1 1 auto; }
.dt-pdf-page-bar .btn { padding: 2px 4px; color: var(--dt-muted); }
.dt-pdf-page-bar .btn:hover { color: var(--dt-text); }
.dt-pdf-page-bar .btn.text-danger:hover { color: #b91c1c !important; }
.dt-pdf-badge {
    position: absolute; top: 4px; right: 4px; padding: 0 6px; border-radius: 999px;
    background: var(--dt-brand); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.5;
}
/* 拖曳排序中 */
.is-sorting, .is-sorting * { cursor: grabbing !important; }
.dt-pdf-file.is-dragging, .dt-pdf-page.is-dragging { opacity: .45; border-style: dashed; }