/* ============================================
   ToolyBench
   ============================================ */
:root {
  --bg-base: #0f1117;
  --bg-surface: #1a1b26;
  --bg-elevated: #24253a;
  --bg-overlay: #2f3049;
  --bg-hover: #363752;
  --text-primary: #e1e2e7;
  --text-secondary: #9498b3;
  --text-muted: #5d6180;
  --border-subtle: #2a2b3d;
  --border-default: #363752;
  --border-strong: #5a5b72;
  --accent: #7c6aef;
  --accent-hover: #8b7cf0;
  --accent-muted: rgba(124,106,239,.15);
  --success: #4ade80;
  --error: #f87171;
  --warning: #fbbf24;
  --warning-muted: rgba(251,191,36,.12);
  --info: #60a5fa;
  --diff-add-bg: rgba(74,222,128,.25);
  --diff-del-bg: rgba(248,113,113,.25);
  --row-hover: rgba(96,165,250,.05);
  --row-expanded: rgba(251,191,36,.08);
  --font-mono: 'JetBrains Mono','Cascadia Code','Fira Code','Consolas',monospace;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --radius-sm: 4px;
  --radius-md: 6px;
  --transition: 120ms ease;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}
[data-theme="light"] {
  --bg-base: #f8f9fc;
  --bg-surface: #fff;
  --bg-elevated: #f1f3f8;
  --bg-overlay: #e8eaf0;
  --bg-hover: #dfe1e8;
  --text-primary: #1e2030;
  --text-secondary: #5c5f77;
  --text-muted: #9498b3;
  --border-subtle: #e8eaf0;
  --border-default: #d5d7e0;
  --border-strong: #8b8fa0;
  --accent: #6c5ce7;
  --accent-hover: #5a4bd6;
  --accent-muted: rgba(108,92,231,.10);
  --success: #16a34a;
  --error: #dc2626;
  --warning: #d97706;
  --warning-muted: rgba(217,119,6,.08);
  --info: #2563eb;
  --diff-add-bg: rgba(22,163,74,.18);
  --diff-del-bg: rgba(220,38,38,.18);
  --row-hover: rgba(37,99,235,.03);
  --row-expanded: rgba(217,119,6,.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity 150ms ease}
body.loaded{opacity:1}
::selection{background:var(--accent-muted)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* === App Shell === */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* === Static Navigation for SEO === */
.static-nav {
  display: none;
}

/* === Homepage === */
.home-hero{text-align:center;padding:32px 24px 0}
.home-hero h1{font-size:28px;font-weight:800;margin-bottom:6px;color:var(--text-primary)}
.home-hero p{font-size:14px;color:var(--text-secondary);margin-bottom:20px}
.home-input-wrap{width:100%;margin:0 auto 24px;padding:0 24px;box-sizing:border-box}
.home-input-card{width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden}
.home-input-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle)}
.home-input-top span:first-child{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.home-input-top span:first-child svg{color:var(--accent)}
.home-input-top span:last-child{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.home-input-card textarea{display:block;width:100%;min-height:140px;background:none;border:none;outline:none;color:var(--text-primary);font-family:var(--font-mono);font-size:14px;padding:16px;resize:vertical;line-height:1.6;box-sizing:border-box}
.home-input-card textarea::placeholder{color:var(--text-muted)}
.home-detect-bar{display:none;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--accent);flex-wrap:wrap;gap:8px}
.home-detect-bar.show{display:flex}
.home-detect-badge{font-size:13px;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}
.home-detect-badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.home-detect-actions{display:flex;gap:6px;flex-wrap:wrap}
.home-detect-actions .btn{font-size:12px;padding:4px 14px;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.home-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;width:100%;margin:0 auto;padding:0 24px 48px;box-sizing:border-box}
.home-tool-card{display:block;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:18px;text-decoration:none;transition:border-color .2s}
.home-tool-card:hover{border-color:var(--accent)}
.home-tool-card h2{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.home-tool-card h2 svg,.home-tool-icon svg{color:var(--accent);flex-shrink:0;width:16px;height:16px}
.home-tool-icon{display:inline-flex;align-items:center}
.home-tool-card p{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:0}
.home-tool-card .tool-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.home-tool-card .tool-tag{font-size:10px;padding:2px 8px;border-radius:4px;background:var(--bg-elevated);color:var(--text-muted)}

/* === Header === */
.header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.header-left{display:flex;align-items:center;gap:14px;flex:1}
.header-center{flex:0 0 auto}
.header-right{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end}
.logo{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--accent);user-select:none;text-decoration:none;transition:text-shadow .3s ease}
.logo:hover{text-shadow:0 0 10px rgba(124,106,239,.5)}
.stats{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}

/* === Navigation === */
.tabs{display:flex;gap:2px;background:var(--bg-elevated);padding:2px;border-radius:var(--radius-md)}
.nav-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-secondary);padding:5px 14px;cursor:pointer;font-size:13px;font-weight:600;border-radius:var(--radius-sm);transition:all var(--transition);text-decoration:none;position:relative}
.nav-link:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-link.active{color:var(--accent);font-weight:700}
.nav-link.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:60%;height:2px;background:var(--accent);border-radius:1px}
.nav-icon{display:inline-flex;align-items:center;opacity:.8}
.nav-icon svg{display:block;width:16px;height:16px}
.nav-link.active .nav-icon{opacity:1}

/* Nav Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border-subtle);color:var(--text-secondary);padding:5px 12px;cursor:pointer;font-size:13px;font-weight:600;border-radius:var(--radius-sm);transition:all var(--transition)}
.nav-dropdown-btn:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-default)}
.nav-dropdown-arrow{transition:transform var(--transition)}
.nav-dropdown-btn[aria-expanded="true"] .nav-dropdown-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:160px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;padding:4px}
.nav-dropdown-menu.show{display:block}
.nav-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--text-secondary);text-decoration:none;font-size:13px;border-radius:var(--radius-sm);transition:all var(--transition)}
.nav-dropdown-item:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-dropdown-item.active{color:var(--accent);font-weight:600;background:var(--bg-elevated)}

/* === Page Body === */
.page-body{display:flex;flex:1;min-height:0;overflow:hidden}

/* === Buttons === */
.btn-icon{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border-subtle);color:var(--text-secondary);width:28px;height:28px;cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition);font-size:11px;font-weight:600}
.btn-icon:hover{background:var(--bg-elevated);color:var(--text-primary)}
#lang-toggle{font-family:var(--font-sans);font-size:11px;letter-spacing:-0.5px}
.btn{display:inline-flex;align-items:center;gap:4px;background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:4px 10px;cursor:pointer;font-size:12px;font-weight:500;border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap}
.btn:hover{background:var(--bg-overlay);color:var(--text-primary);border-color:var(--border-default)}
.btn-icon-svg{display:inline-flex;align-items:center;opacity:.6}
.btn:hover .btn-icon-svg{opacity:.9}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-danger{color:var(--error)}
.btn-danger:hover{background:rgba(248,113,113,.1);border-color:var(--error)}
.btn-ghost{display:inline-flex;align-items:center;gap:3px;background:none;border:none;color:var(--text-muted);padding:3px 6px;cursor:pointer;font-size:11px;border-radius:var(--radius-sm);transition:all var(--transition)}
.btn-ghost:hover{color:var(--text-secondary);background:var(--bg-elevated)}
.btn-sm{font-size:10px;padding:1px 6px}

/* === Toolbar === */
.toolbar{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.toolbar-group{display:flex;align-items:center;gap:4px}
.toolbar-sep{width:1px;height:18px;background:var(--border-subtle);flex-shrink:0}
.toolbar-spacer{flex:1}
.field-label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.field-select{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:2px 5px;border-radius:var(--radius-sm);font-size:11px;cursor:pointer}
.check-label{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.check-label input{accent-color:var(--accent);width:13px;height:13px}
.filter-select{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);padding:2px 6px;border-radius:var(--radius-sm);font-size:11px;cursor:pointer;outline:none;transition:border-color var(--transition)}
.filter-select:focus{border-color:var(--accent)}

/* === Tab Content === */
/* View content panels (within JSON page) */
.view-content{display:none;flex:1;min-height:0;overflow:hidden}
.view-content.active{display:flex;flex-direction:column}

/* === JSON Page: Rail + Content === */

/* Left View Rail */
.view-rail{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:var(--bg-surface);border-right:1px solid var(--border-subtle);flex-shrink:0;width:42px}
.rail-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition);position:relative}
.rail-btn:hover{color:var(--text-secondary);background:var(--bg-elevated)}
.rail-btn.active{color:var(--accent);background:var(--accent-muted)}
.rail-btn.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--accent);border-radius:1px}

/* Content Area */
.content-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* View Content - each fills the entire content area */
.view-content{display:none;flex:1;min-height:0;overflow:hidden}
.view-content.active{display:flex;flex-direction:column}

/* Editor container fills its view */
.editor-container{flex:1;min-height:0;position:relative}
.editor-container .monaco-editor{position:absolute;inset:0}

/* === Tree View (full page) === */
.tree-fullpage{flex:1;display:flex;overflow:auto;padding:12px 16px;font-family:var(--font-mono);font-size:12px;line-height:1.8}
.tree-node{padding-left:20px}
.tree-block{display:block}
.tree-key{color:var(--info)}
.tree-toggle{cursor:pointer;user-select:none;display:inline-block;width:16px;text-align:center;color:var(--text-muted);font-size:10px}
.tree-toggle:hover{color:var(--text-primary)}
.tree-bracket{color:var(--text-muted);font-family:var(--font-mono)}
.tree-children{padding-left:4px}
.tree-children.collapsed{display:none}
.tree-value-string{color:var(--success)}
.tree-value-number{color:var(--warning)}
.tree-value-bool{color:var(--accent)}
.tree-value-null{color:var(--error)}

/* === Table View (full page) === */
.table-info{padding:6px 14px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);font-size:11px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.table-actions{display:flex;gap:4px}
.table-fullpage{flex:1;display:flex;overflow:auto;background:var(--bg-base);align-items:flex-start}
.table-placeholder{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);gap:6px}
.table-placeholder .hint{font-size:11px;opacity:.5}

/* Single flat table for all levels */
.json-table{width:auto;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)}
.json-table th{border:1px solid var(--border-strong);padding:5px 12px;vertical-align:middle;font-size:12px;line-height:1.6;font-weight:600;background:var(--bg-elevated);color:var(--text-secondary);text-align:left;position:sticky;top:0;z-index:1;white-space:nowrap}
.th-sortable{cursor:pointer;user-select:none}
.th-sortable:hover{background:var(--bg-hover);color:var(--text-primary)}
.th-sort{font-size:10px;color:var(--text-muted);font-weight:400;margin-left:2px}
.th-sort.active{color:var(--info);font-weight:600}
.json-table td{border:1px solid var(--border-strong);padding:5px 12px;vertical-align:top;font-size:12px;line-height:1.6}
/* .json-table tr:hover td{background:var(--row-hover)} */
.json-table tr.row-expanded td{background:var(--row-expanded)}

/* Key cell */
.table-key-cell{font-weight:600;color:var(--info);white-space:nowrap;min-width:40px}
.table-toggle{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;text-align:center;cursor:pointer;color:var(--text-muted);font-size:9px;margin-right:4px;border-radius:2px;transition:all var(--transition);user-select:none;line-height:1}
.table-toggle:hover{color:var(--text-primary);background:var(--bg-hover)}
.table-key-name{margin-left:2px}

/* Value cell */
.table-val-cell{word-break:break-word;color:var(--text-primary);white-space:nowrap;cursor:pointer;transition:background var(--transition)}
.table-val-cell.cell-selected{background:rgba(251,191,36,.18) !important}
[data-theme="light"] .table-val-cell.cell-selected{background:rgba(217,119,6,.12) !important}
.tv-string{color:var(--success)}
.tv-number{color:var(--warning);font-weight:500}
.tv-bool{color:var(--accent);font-weight:500}
.tv-null{color:var(--error);font-style:italic}

/* Type badges: Array[N], Object{N} */
.tv-type-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:var(--radius-sm);font-weight:600;cursor:default}
.tv-type-badge.array{color:var(--warning);background:var(--warning-muted)}
.tv-type-badge.object{color:var(--info);background:var(--accent-muted)}
.table-root-toggle{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer}
.table-root-toggle:hover{background:var(--hover)}
.table-load-more{text-align:center;padding:10px;cursor:pointer;color:var(--accent);font-size:13px}
.table-load-more:hover{background:var(--hover)}

/* Depth-based subtle background to show hierarchy */
tr.table-depth-1 td:first-child{border-left:3px solid var(--accent)}
tr.table-depth-2 td:first-child{border-left:3px solid var(--warning)}
tr.table-depth-3 td:first-child{border-left:3px solid var(--success)}
tr.table-depth-4 td:first-child{border-left:3px solid var(--error)}

/* Cell mode: nested table inside value cell */
.cell-nested-wrap{margin-top:0;padding:0;overflow-x:auto}
.nested-table{width:100%;border-collapse:collapse;margin:0;border:none}
.nested-table td{border:1px solid var(--border-strong);padding:3px 10px}
/* .nested-table tr:hover td{background:var(--row-hover)} */
.nested-table tr.row-expanded td{background:var(--row-expanded)}
.nested-idx{color:var(--text-muted);font-weight:600;text-align:center;width:36px;background:var(--bg-overlay);border:1px solid var(--border-strong)}
[data-theme="light"] .nested-idx{background:var(--bg-elevated)}

/* Array as columns table */
.array-cols-table{width:auto;border-collapse:collapse;border:none;overflow:hidden}
.array-col-header{background:var(--bg-elevated);font-weight:600;color:var(--text-secondary);font-size:11px;padding:0;white-space:nowrap}
.array-cols-table tbody td{border:1px solid var(--border-strong);padding:3px 10px;font-size:12px;white-space:nowrap}
/* .array-cols-table tbody tr:hover td{background:var(--row-hover)} */

/* === Status Bar === */
.status-bar{display:flex;align-items:center;padding:0 12px;height:22px;background:var(--bg-surface);border-top:1px solid var(--border-subtle);flex-shrink:0;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);gap:12px}
.status-stats{margin-right:auto}
.status-bar.success{color:var(--success)}
.status-bar.error{color:var(--error);font-weight:600}
.status-bar.warning{color:var(--warning)}

/* === Compare Page === */
.compare-page{flex-direction:column}
.compare-panels{display:flex;flex:1;min-height:0}
.compare-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-base)}
.compare-panel-header{padding:0 12px;height:28px;display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-size:11px;font-weight:600;color:var(--text-muted);flex-shrink:0}
.btn-upload{display:inline-flex;align-items:center;gap:4px;background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--transition)}
.btn-upload:hover{background:var(--bg-overlay);color:var(--text-primary);border-color:var(--border-default)}
.compare-panel .editor-container{flex:1;min-height:0}
.compare-panel .monaco-editor{padding-left:0!important}
.compare-panel .monaco-editor .margin{padding-left:0!important;margin-left:0!important}
.compare-panel .monaco-editor .line-numbers{text-align:center!important;padding-left:0!important;padding-right:0!important}

/* Merge Gutter */
.merge-gutter{width:36px;background:var(--bg-surface);border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle);flex-shrink:0;position:relative;overflow:hidden}
.merge-btn-group{display:flex;align-items:center;justify-content:space-between;padding:0 1px}
.merge-arrow{background:none;border:none;cursor:pointer;font-size:11px;font-weight:700;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition);padding:0;line-height:1}
.merge-right{color:var(--error)}
.merge-right:hover{background:var(--diff-del-bg)}
.merge-left{color:var(--success)}
.merge-left:hover{background:var(--diff-add-bg)}

/* Diff summary */
.diff-summary{font-size:11px;font-family:var(--font-mono)}
.diff-summary.identical{color:var(--success);font-weight:600}
.diff-summary.different{color:var(--error)}

/* Diff line decorations */
.diff-line-removed{background:var(--diff-del-bg)!important}
.diff-line-added{background:var(--diff-add-bg)!important}
.diff-line-placeholder{background:transparent!important}
.diff-gutter-removed{background:var(--diff-del-bg);border-left:3px solid var(--error)!important}
.diff-gutter-added{background:var(--diff-add-bg);border-left:3px solid var(--success)!important}
.diff-word-removed{background:rgba(248,113,113,.3);border-radius:2px}
.diff-word-added{background:rgba(74,222,128,.3);border-radius:2px}
.diff-flash-highlight{background:rgba(124,106,239,.4)!important;transition:background .3s}
[data-theme="light"] .diff-word-removed{background:rgba(220,38,38,.18)}
[data-theme="light"] .diff-word-added{background:rgba(22,163,74,.18)}

/* Fullscreen */
.compare-page.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:var(--bg-base)}

/* === Footer === */
.footer{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 12px;font-size:10px;color:var(--text-muted);background:var(--bg-surface);border-top:1px solid var(--border-subtle);flex-shrink:0;min-height:20px}
.footer-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 12px;font-size:11px}
.footer-tool-link{color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:color var(--transition)}
.footer-tool-link:hover{color:var(--accent)}
.footer-tool-link.current{color:var(--accent);font-weight:600}
.footer-copy{display:flex;align-items:center;gap:4px;line-height:1.5}
.footer-feedback{color:var(--text-secondary);text-decoration:none;transition:color var(--transition)}
.footer-feedback:hover{color:var(--accent)}

/* === SEO page title bar (keyword heading + intro above the tool workbench) === */
.page-title-bar{display:none}
.page-title-bar h1{margin:0;font-size:15px;line-height:1.45;font-weight:800;color:var(--text-primary)}
.page-title-bar p{margin:3px 0 0;font-size:12px;line-height:1.55;color:var(--text-muted);max-width:960px}

/* Loading */
.loading-indicator{position:relative}
.loading-indicator::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:slide 800ms ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* === Column View (macOS Finder style) === */
.col-view{display:flex;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;background:var(--bg-base)}
.col-panel{min-width:220px;max-width:320px;flex:0 0 auto;border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;background:var(--bg-surface)}
.col-panel:last-child{border-right:none}
.col-panel-header{padding:6px 12px;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.col-panel-list{flex:1;overflow-y:auto;padding:4px 0}
.col-item{display:flex;align-items:center;padding:4px 12px;cursor:pointer;gap:6px;font-size:12px;font-family:var(--font-mono);transition:background 80ms}
.col-item:hover{background:var(--row-hover)}
.col-item.selected{background:var(--accent);color:#fff}
.col-item.selected .col-item-key{color:#fff}
.col-item.selected .col-type,.col-item.selected .col-val,.col-item.selected .col-item-arrow{color:rgba(255,255,255,.7)}
.col-item-key{font-weight:600;color:var(--info);white-space:nowrap;flex-shrink:0}
.col-item-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.col-item-arrow{color:var(--text-muted);font-size:14px;font-weight:700;flex-shrink:0;margin-left:auto}
.col-type{font-size:10px;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}
.col-type.array{background:rgba(96,165,250,.12);color:var(--info)}
.col-type.object{background:rgba(163,130,246,.12);color:var(--accent)}
.col-type.null{background:rgba(148,152,179,.12);color:var(--text-muted)}
.col-val{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-val.string{color:var(--success)}
.col-val.number{color:var(--warning)}
.col-val.bool{color:var(--error)}
.col-val.null{color:var(--text-muted)}
.col-empty{display:flex;align-items:center;justify-content:center;width:100%;color:var(--text-muted);font-size:12px}

/* === Markdown Page === */
.markdown-page{flex-direction:column}

/* View mode tabs */
.md-view-tabs{display:flex;gap:2px;background:var(--bg-elevated);padding:2px;border-radius:var(--radius-md)}
.md-tab{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--text-secondary);padding:4px 14px;cursor:pointer;font-size:12px;font-weight:500;border-radius:var(--radius-sm);transition:all var(--transition)}
.md-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.md-tab.active{background:var(--accent);color:#fff;font-weight:600}
.md-tab .btn-icon-svg{opacity:.6}
.md-tab.active .btn-icon-svg{opacity:1}

/* Search bar */
.md-search-bar{display:flex;align-items:center;gap:2px}
.md-search-input{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);padding:3px 8px;border-radius:var(--radius-sm);font-size:12px;width:220px;outline:none;transition:border-color var(--transition)}
.md-search-input:focus{border-color:var(--accent)}
.md-search-btn,.nav-btn{background:none;border:none;color:var(--text-muted);padding:2px 4px;cursor:pointer;font-size:10px;border-radius:var(--radius-sm);transition:all var(--transition);line-height:1}
.md-search-btn:hover,.nav-btn:hover{color:var(--text-primary);background:var(--bg-elevated)}
.md-search-btn{display:none}
.md-search-btn.visible{display:inline-block}
.md-search-count{font-size:11px;color:var(--text-muted);min-width:40px;text-align:center;font-family:var(--font-mono);display:none}
.md-search-count.visible{display:inline-block}

/* Content area */
.md-content{display:flex;flex:1;min-height:0}
.md-editor-pane{flex:1;display:flex;flex-direction:column;min-width:0}
.md-preview-pane{flex:1;display:flex;flex-direction:row;min-width:0}

/* View modes */
.md-content.md-edit-only .md-preview-pane,
.md-content.md-edit-only .panel-resizer{display:none}
.md-content.md-preview-only .md-editor-pane,
.md-content.md-preview-only .panel-resizer{display:none}

/* Preview */
.md-preview{flex:1;overflow:auto;padding:16px 24px;background:var(--bg-base);font-size:14px;line-height:1.7;color:var(--text-primary)}
.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4,.md-preview h5,.md-preview h6{margin:1em 0 .5em;font-weight:600;line-height:1.3}
.md-preview h1{font-size:1.8em;border-bottom:1px solid var(--border-subtle);padding-bottom:.3em}
.md-preview h2{font-size:1.4em;border-bottom:1px solid var(--border-subtle);padding-bottom:.2em}
.md-preview h3{font-size:1.2em}
.md-preview p{margin:.6em 0}
.md-preview a{color:var(--accent);text-decoration:none}
.md-preview a:hover{text-decoration:underline}
.md-preview code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-elevated);padding:2px 6px;border-radius:var(--radius-sm)}
.md-preview pre{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 16px;overflow-x:auto;margin:.8em 0}
.md-preview pre code{background:none;padding:0;font-size:.85em}
.md-preview blockquote{border-left:3px solid var(--accent);padding:.5em 1em;margin:.8em 0;color:var(--text-secondary);background:var(--bg-elevated);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.md-preview table{border-collapse:collapse;width:100%;margin:.8em 0}
.md-preview th,.md-preview td{border:1px solid var(--border-subtle);padding:6px 12px;text-align:left;font-size:13px}
.md-preview th{background:var(--bg-elevated);font-weight:600}
.md-preview img{max-width:100%;border-radius:var(--radius-md)}
.md-preview ul,.md-preview ol{padding-left:1.5em;margin:.5em 0}
.md-preview li{margin:.2em 0}
.md-preview hr{border:none;border-top:1px solid var(--border-subtle);margin:1.5em 0}
.md-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:12px}

/* Search highlights */
.md-search-highlight-inline{background:rgba(251,191,36,.35);border-radius:2px}
.md-preview-search-match{background:rgba(251,191,36,.35);border-radius:2px}
.md-preview-search-active{background:rgba(251,191,36,.7);outline:2px solid var(--warning)}

/* TOC Panel */
.md-toc-panel{display:none;width:240px;border-right:1px solid var(--border-subtle);background:var(--bg-surface);overflow-y:auto;flex-shrink:0}
.md-content.md-split .md-toc-panel.visible,.md-content.md-preview-only .md-toc-panel.visible{display:flex;flex-direction:column}
.md-content.md-edit-only .md-toc-panel{display:none!important}
.md-toc-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border-subtle);font-size:13px;font-weight:600;color:var(--text-primary)}
.md-toc-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.md-toc-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.md-toc-content{flex:1;overflow-y:auto;padding:8px 0}
.md-toc-empty{padding:12px;color:var(--text-muted);font-size:12px;text-align:center}
.md-toc-list{list-style:none;margin:0;padding:0}
.md-toc-list li{margin:0}
.md-toc-link{display:block;padding:4px 12px;color:var(--text-secondary);text-decoration:none;font-size:13px;line-height:1.5;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-toc-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.md-toc-link.active{background:var(--accent-muted);color:var(--accent);font-weight:600}

@media(max-width:900px){
  .md-content{flex-direction:column}
  .view-rail{flex-direction:row;width:auto;height:38px;padding:4px 8px;border-right:none;border-bottom:1px solid var(--border-subtle)}
  .header-center{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:4px 8px;justify-content:center}
  .tabs{width:100%;justify-content:space-around;background:none;padding:0}
  .nav-link{flex:1;justify-content:center;padding:8px 4px;font-size:11px}
  .nav-link.active::after{bottom:0;width:80%}
  .page-body{padding-bottom:48px}
}