/* 基礎設定 */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Monaco, monospace;
  margin: 0; padding: 16px;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  --font-size: 15px;
  --button-font-size: 15px;
  transition: background 0.3s, color 0.3s;
}

/* 防止 Modal 開啟時背景跳動 */
body.modal-open { overflow: hidden; padding-right: 15px; }

/* 字體大小變量 */
body.font-small { --font-size: 13px; --button-font-size: 13px; }
body.font-medium { --font-size: 15px; --button-font-size: 15px; }
body.font-large { --font-size: 18px; --button-font-size: 18px; }

/* 主題變量庫 */
body.theme-dark { --bg: #1a1b26; --text: #c0caf5; --panel: #24283b; --border: #3b4261; --primary: #7aa2f7; --primary-hover: #89b4fa; --secondary: #3b4261; --secondary-hover: #414868; --key: #7dcfff; --key-index: #bb9af7; --string: #9ece6a; --number: #ff9e64; --muted: #565f89; --error: #f7768e; --hover-bg: rgba(122, 162, 247, 0.15); }
body.theme-onedark { --bg: #282c34; --text: #abb2bf; --panel: #21252b; --border: #3e4451; --primary: #61afef; --primary-hover: #528bff; --secondary: #3e4451; --secondary-hover: #4b5263; --key: #e06c75; --key-index: #c678dd; --string: #98c379; --number: #d19a66; --muted: #5c6370; --error: #e06c75; --hover-bg: rgba(97, 175, 239, 0.1); }
body.theme-monokai { --bg: #2d2a2e; --text: #fcfcfa; --panel: #221f22; --border: #403e41; --primary: #ffd866; --primary-hover: #ffcf40; --secondary: #403e41; --secondary-hover: #4d4d4d; --key: #ff6188; --key-index: #ab9df2; --string: #a9dc76; --number: #fc9867; --muted: #727072; --error: #ff6188; --hover-bg: rgba(255, 216, 102, 0.1); }
body.theme-nord { --bg: #2e3440; --text: #d8dee9; --panel: #3b4252; --border: #4c566a; --primary: #88c0d0; --primary-hover: #81a1c1; --secondary: #3b4252; --key: #8fbcbb; --key-index: #b48ead; --string: #a3be8c; --number: #ebcb8b; --muted: #4c566a; --error: #bf616a; --hover-bg: rgba(136, 192, 208, 0.2); }
body.theme-cyberpunk { --bg: #000b1e; --text: #00ff9f; --panel: #00162d; --border: #00d2ff; --primary: #f300ff; --primary-hover: #ff00ea; --secondary: #00162d; --secondary-hover: #002d5a; --key: #00d2ff; --key-index: #ffff00; --string: #00ff9f; --number: #ff0055; --muted: #005670; --error: #ff0055; --hover-bg: rgba(243, 0, 255, 0.15); }
body.theme-light { --bg: #f8f9fa; --text: #212529; --panel: #ffffff; --border: #dee2e6; --primary: #0d6efd; --primary-hover: #0b5ed7; --secondary: #e9ecef; --secondary-hover: #dee2e6; --key: #052c65; --key-index: #6610f2; --string: #198754; --number: #fd7e14; --muted: #6c757d; --error: #dc3545; --hover-bg: rgba(13, 110, 253, 0.05); }
body.theme-snow { --bg: #fafafa; --text: #1a1a1a; --panel: #ffffff; --border: #e5e5e5; --primary: #2563eb; --primary-hover: #1d4ed8; --secondary: #f4f4f5; --secondary-hover: #e4e4e7; --key: #0369a1; --key-index: #7c3aed; --string: #15803d; --number: #c2410c; --muted: #71717a; --error: #dc2626; --hover-bg: rgba(37, 99, 235, 0.08); }
body.theme-paper { --bg: #f5f0e8; --text: #2c2416; --panel: #fffef9; --border: #e8e0d4; --primary: #b8860b; --primary-hover: #996f09; --secondary: #ebe5dc; --secondary-hover: #ddd5c8; --key: #6b5b2e; --key-index: #8b4513; --string: #2e7d32; --number: #c62828; --muted: #6d6b65; --error: #b71c1c; --hover-bg: rgba(184, 134, 11, 0.1); }
body.theme-catppuccin-latte { --bg: #eff1f5; --text: #4c4f69; --panel: #e6e9ef; --border: #ccd0da; --primary: #1e66f5; --primary-hover: #184fc4; --secondary: #e6e9ef; --secondary-hover: #dce0e8; --key: #1e66f5; --key-index: #8839ef; --string: #40a02b; --number: #fe640b; --muted: #9ca0b0; --error: #d20f39; --hover-bg: rgba(30, 102, 245, 0.1); }
body.theme-solarized-light { --bg: #fdf6e3; --text: #657b83; --panel: #eee8d5; --border: #93a1a1; --primary: #268bd2; --primary-hover: #2aa198; --secondary: #eee8d5; --secondary-hover: #e0d9c4; --key: #268bd2; --key-index: #6c71c4; --string: #859900; --number: #d33682; --muted: #839496; --error: #dc322f; --hover-bg: rgba(38, 139, 210, 0.12); }

/* 排版與面板 - 固定尺寸，只有框內可 scroll */
h1 { font-size: 24px; margin-bottom: 16px; color: var(--primary); flex-shrink: 0; }
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-shrink: 0; }
.header h1 { margin-bottom: 0; line-height: 24px; }
.header-links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-link { color: var(--muted); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: color 0.2s; }
.icon-link svg { display: block; flex-shrink: 0; }
.icon-link:hover { color: var(--primary); }
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; flex-shrink: 0; }
.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-spacer { flex: 1; min-width: 16px; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.toolbar-post-parse { display: none; gap: 8px; }
.toolbar-post-parse.visible { display: inline-flex; }
.toolbar-icon-link { color: var(--muted); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: color 0.2s; flex-shrink: 0; }
.toolbar-icon-link:hover { color: var(--primary); }
.main { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
.panel-left, .panel-right { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; transition: all 0.3s ease; }
.panel-left.hidden { display: none; }
.panel-right.full-width { flex: 1; }

/* 按鈕樣式 - Toolbar 同 Settings 用同一 button font-size */
.toolbar button,
.settings-dialog .settings-options button,
.settings-dialog .btn-done,
.settings-backdrop button:not(.tiny-btn) { font-size: var(--button-font-size); }
button {
  background: var(--primary); color: var(--bg); border: none; padding: 8px 16px;
  border-radius: 6px; cursor: pointer; font-weight: bold; font-family: inherit; font-size: var(--button-font-size); transition: all 0.2s;
}
button.secondary { background: var(--secondary); color: var(--text); border: 1px solid var(--border); }
button.secondary:hover { background: var(--secondary-hover); border-color: var(--primary); }
button.is-active { background: var(--primary); color: var(--bg); pointer-events: none; }
.theme-opt.is-active,
.font-opt.is-active,
.lang-opt.is-active { border-color: var(--primary); }

/* 彈窗設計 */
.settings-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px); z-index: 2000; align-items: center; justify-content: center;
}
.settings-backdrop.open { display: flex; }
.settings-dialog {
  background: var(--panel); border: 0px solid var(--border); border-radius: 8px;
  padding: 15px; width: 95%; max-width: 700px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.array-filter-dialog { max-width: 700px; max-height: 800px; }
.settings-row { margin-bottom: 30px; }
.settings-label { display: block; font-size: 15px; color: var(--primary); font-weight: bold; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 1px; }
.settings-options { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-dialog .settings-options button,
.settings-dialog .btn-done { min-height: 38px; box-sizing: border-box; font-size: var(--button-font-size); }

/* JSON Tree - 只有框內 scroll */
#jsonInput { flex: 1; min-height: 0; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-family: inherit; font-size: var(--font-size); resize: none; transition: border-color 0.2s; }
#jsonInput:hover, #jsonInput:focus { border-color: var(--primary); outline: none; }
.tree { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-size: var(--font-size); line-height: 1.6; transition: border-color 0.2s; }
.tree:hover { border-color: var(--primary); }
.error { color: var(--error); margin-top: 2px; min-height: 0.9em; font-size: 0.8em; }
.error-placeholder { margin-top: 2px; min-height: 0.9em; flex-shrink: 0; }

/* JSON 節點 */
.node-item { display: block; position: relative; }
.node-row { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 2px; padding: 2px 4px; margin: 0 -4px; border-radius: 4px; transition: background 0.15s; }
.node-row.collapsible { cursor: pointer; }
.node-row.collapsible:hover { background: var(--hover-bg); }
.node-row:not(.collapsible):hover { background: rgba(128, 128, 128, 0.06); }
.node .toggle { width: 14px; flex-shrink: 0; color: var(--muted); font-size: 10px; user-select: none; pointer-events: none; }
.toggle-btn { cursor: pointer; display: inline-block; width: 16px; text-align: center; color: var(--muted); user-select: none; margin-right: 4px; }
.node-key { color: var(--key); font-weight: bold; }
.node-string { color: var(--string); }
.node-number { color: var(--number); }
/* 語法高亮 - key / value 顏色 */
.key { color: var(--key); font-weight: 500; }
.key-index { color: var(--key-index); font-weight: 500; }
.node .string { color: var(--string); }
.node .number { color: var(--number); }
.node .boolean { color: var(--number); font-weight: bold; }
.node [class="object"] { color: var(--muted); }
.array-filter-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 250px; overflow-y: auto; padding: 10px; background: var(--bg); border-radius: 8px; }
.filter-warning { color: var(--error); font-size: 0.9em; margin-top: 8px; }

/* ... 保留原有基礎變量與佈局 ... */

/* 修正/新增按鈕樣式 */
.tiny-btn {
    padding: 2px 8px !important;
    font-size: 11px !important;
    height: 22px !important;
    min-width: auto !important;
    margin: 0 !important;
    line-height: 1;
}
.array-filter-btn,
.array-collapse-children-btn,
.filter-dialog-control-btn { padding: 10px 10px !important; font-size: 13px !important; height: 26px !important; min-width: auto !important; margin: 0 !important; line-height: 1; display: inline-flex; align-items: center; gap: 5px; }
.array-filter-btn .btn-icon,
.array-collapse-children-btn .btn-icon { display: inline-flex; align-items: center; font-size: 12px; }
.array-filter-btn .btn-icon svg,
.array-collapse-children-btn .btn-icon svg { flex-shrink: 0; width: 14px; height: 14px; }
.array-filter-btn.is-filtering { background: var(--primary) !important; color: var(--bg) !important; border-color: var(--primary) !important; }

.array-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 12px;
    vertical-align: middle;
}

/* Array Filter 彈窗內部佈局 */
.array-filter-keys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-height: 350px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.filter-controls {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.filter-checkbox-item {
    display: flex;
    align-items: center;
}

.filter-checkbox-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    width: 100%;
}

.filter-checkbox-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary);
}

/* 收合時同行的摘要 */
.node .collapse-summary,
.node .collapse-summary-bracket { display: none; }
.node.collapsed .collapse-summary { display: inline; color: var(--muted); font-size: 0.9em; }
.node.collapsed .collapse-summary-bracket { display: inline; color: var(--text); }

/* 括號標記 - 與開括號 { 對齊 */
.bracket-close {
    padding-left: 16px;
    opacity: 0.8;
}

.node-body {
    border-left: 1px solid var(--border);
    margin-left: 16px;
    padding-left: 8px;
}

.node.collapsed > .node-body,
.node.collapsed > .bracket-close {
    display: none;
}

/* Empty object/array: { } on same line */
.node.empty .inline-bracket-close { display: none; }
.node.empty:not(.collapsed) .inline-bracket-close { display: inline; }
.node.empty > .bracket-close { display: none; }