/* ─────────────────────────────────────────
   CSS VARIABLES — matches site palette exactly
───────────────────────────────────────── */
:root {
    --brand:          #4eb39a;
    --brand-dark:     #3a9b83;
    --brand-deep:     #0e2d27;
    --accent-light:   #e1f5ee;
    --accent-mid:     #b3e6d8;
    --text:           #1a2e2b;
    --text-muted:     #5f7a74;
    --text-subtle:    #94aaa6;
    --border-light:   rgba(78,179,154,0.15);
    --border-mid:     rgba(78,179,154,0.25);
    --border-strong:  rgba(78,179,154,0.4);
    --green:          #16a34a;
    --green-d:        rgba(22,163,74,0.08);
    --green-b:        rgba(22,163,74,0.22);
    --blue:           #2563eb;
    --blue-d:         rgba(37,99,235,0.08);
    --yellow:         #d97706;
    --yellow-d:       rgba(217,119,6,0.08);
    --red:            #dc2626;
    --red-d:          rgba(220,38,38,0.08);
    --purple:         #7c3aed;
    --purple-d:       rgba(124,58,237,0.08);
    --text0:          #1a2e2b;
    --text1:          #0e2d27;
    --text2:          #5f7a74;
    --text3:          #94aaa6;
    --bg0:            #f5f9f8;
    --bg1:            #ffffff;
    --bg2:            #f5f9f8;
    --bg3:            #eaf4f1;
    --bg4:            #e1f0ec;
    --border:         rgba(78,179,154,0.15);
    --border2:        rgba(78,179,154,0.3);
    --syne:           'DM Sans', sans-serif;
    --mono:           'DM Mono', monospace;
    --teal:           #0d9488;
    /* JSON syntax colours */
    --jkey:   #0e7490;
    --jstr:   #15803d;
    --jnum:   #9333ea;
    --jbool:  #d97706;
    --jnull:  #dc2626;
    --jpunct: #5f7a74;
}

.jf-page {
    font-family: 'DM Sans', -apple-system, sans-serif;
    background: #f5f9f8;
    min-height: 100vh;
    color: var(--text);
}

/* ── HERO ── */
.ipc-hero {
    background: linear-gradient(145deg, #0e2d27 0%, #1a4a3d 60%, #0e3530 100%);
    border-bottom: 1px solid rgba(78,179,154,0.2);
    padding: 2.5rem 2rem 2rem;
    position: relative;
    overflow: hidden;
}
.ipc-hero::before {
    content: '';
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 320px;
    background: radial-gradient(ellipse, rgba(78,179,154,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.ipc-hero-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 300px;
    gap: 2.5rem; align-items: center;
    position: relative; z-index: 1;
}
.ipc-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem; font-weight: 500;
    color: rgba(111,209,179,0.7);
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 0.55rem;
    display: flex; align-items: center; gap: 7px;
}
.ipc-eyebrow::before { content: '//'; opacity: 0.5; }
.ipc-hero h1, .ipc-hero h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700; color: #fff;
    line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 0.5rem;
}
.ipc-hero h1 em, .ipc-hero h2 em { font-style: normal; color: #6fd1b3; }
.ipc-hero > .ipc-hero-inner > div > p {
    font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.8; max-width: 480px;
}
.ipc-feat-list { display: flex; flex-direction: column; gap: 4px; margin-top: 0.9rem; }
.ipc-feat {
    display: flex; align-items: center; gap: 7px;
    font-family: 'DM Mono', monospace; font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
}
.ipc-feat::before { content: '▸'; color: #6fd1b3; font-size: 8px; }

/* Hero stat panel */
.ipc-stat-panel {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(78,179,154,0.25);
    border-radius: 10px; padding: 1.1rem 1.2rem; display: none;
}
.ipc-stat-panel.show { display: block; }
.isp-title {
    font-family: 'DM Mono', monospace; font-size: 0.6rem;
    color: rgba(111,209,179,0.6); letter-spacing: 0.1em;
    text-transform: uppercase; margin-bottom: 0.65rem;
}
.isp-rows { display: flex; flex-direction: column; gap: 4px; }
.isp-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.isp-row:last-child { border-bottom: none; }
.isp-k { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.isp-v { font-family: 'DM Mono', monospace; font-size: 0.75rem; font-weight: 500; color: #fff; }
.isp-v.green  { color: #6fd1b3; }
.isp-v.blue   { color: #7eb8f4; }
.isp-v.yellow { color: #f9cb42; }
.isp-v.red    { color: #f87171; }

/* ── MAIN ── */
.ipc-main { max-width: 1200px; margin: 0 auto; padding: 1.75rem 2rem; }

.sec-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 0.75rem;
}
.sec-title::after { content: ''; flex: 1; height: 1px; background: rgba(78,179,154,0.15); }

/* ── TOOL CARD (main input/output) ── */
.tool-card {
    background: #fff;
    border: 1px solid rgba(78,179,154,0.18);
    border-radius: 12px; margin-bottom: 1.5rem;
    overflow: hidden; transition: box-shadow 0.2s;
}
.tool-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.tc-head {
    background: #f5f9f8;
    padding: 0.8rem 1.4rem;
    border-bottom: 1px solid rgba(78,179,154,0.12);
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.tc-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; font-weight: 700; color: #0e2d27;
}
.tc-title svg { width: 14px; height: 14px; stroke: #3a9b83; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-body { padding: 1.1rem 1.4rem; }

/* Mode toggle (Formatter / Validator) */
.mode-toggle {
    display: flex; gap: 3px;
    background: #eaf4f1;
    border: 1px solid rgba(78,179,154,0.2);
    border-radius: 7px; padding: 3px;
}
.mode-btn {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem; font-weight: 500;
    padding: 5px 14px; border-radius: 5px; border: none;
    cursor: pointer; transition: all 0.15s;
    color: var(--text-muted); background: transparent; letter-spacing: 0.04em;
}
.mode-btn.active { background: #4eb39a; color: #fff; font-weight: 700; }
.mode-btn:not(.active):hover { background: rgba(78,179,154,0.15); color: #3a9b83; }

/* Indent selector */
.indent-select {
    background: #fff; border: 1px solid rgba(78,179,154,0.25);
    border-radius: 6px; padding: 5px 9px;
    font-family: 'DM Mono', monospace; font-size: 0.72rem; color: #0e2d27;
    outline: none; cursor: pointer; transition: border-color 0.15s;
}
.indent-select:focus { border-color: #4eb39a; }

/* Button styles */
.btn-primary {
    background: #4eb39a; border: none; border-radius: 8px;
    padding: 8px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem; font-weight: 700; color: #0e2d27;
    cursor: pointer; transition: background 0.15s, transform 0.14s;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn-primary:hover { background: #3a9b83; transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.btn-secondary {
    background: #f5f9f8; border: 1px solid rgba(78,179,154,0.25);
    border-radius: 8px; padding: 7px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.btn-secondary:hover { border-color: #4eb39a; color: #3a9b83; background: #e1f5ee; }
.btn-secondary svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.btn-danger {
    background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.2);
    border-radius: 8px; padding: 7px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem; font-weight: 600; color: #dc2626;
    cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-danger:hover { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.35); }
.btn-danger svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── EDITOR AREA ── */
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 1rem;
}
.editor-pane {
    display: flex; flex-direction: column; gap: 6px;
}
.editor-label {
    font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 600;
    color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
}
.editor-label .char-count {
    font-size: 0.62rem; color: var(--text-subtle); font-weight: 400;
}
.json-textarea {
    background: #f5f9f8;
    border: 1px solid rgba(78,179,154,0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 0.82rem; color: #0e2d27;
    resize: vertical; outline: none;
    width: 100%; min-height: 320px;
    line-height: 1.6; tab-size: 2;
    transition: border-color 0.2s, background 0.2s;
}
.json-textarea::placeholder { color: #94aaa6; font-size: 0.8rem; font-weight: 400; }
.json-textarea:focus { border-color: #4eb39a; background: #fff; }
.json-textarea.valid   { border-color: rgba(22,163,74,0.4);   background: rgba(22,163,74,0.02); }
.json-textarea.invalid { border-color: rgba(220,38,38,0.4);   background: rgba(220,38,38,0.02); }

/* ── HIGHLIGHTED OUTPUT ── */
.json-output-wrap {
    background: #f5f9f8;
    border: 1px solid rgba(78,179,154,0.25);
    border-radius: 8px;
    min-height: 320px; max-height: 580px;
    overflow: auto;
    position: relative;
}
.json-output {
    padding: 12px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 0.82rem; line-height: 1.6;
    white-space: pre; tab-size: 2;
    min-height: 320px;
    cursor: text;
}
/* Syntax highlighting classes */
.jk { color: var(--jkey);   font-weight: 500; }
.js { color: var(--jstr); }
.jn { color: var(--jnum); }
.jb { color: var(--jbool);  font-weight: 500; }
.jl { color: var(--jnull);  font-weight: 500; }
.jp { color: var(--jpunct); }
/* Collapsible sections */
.jfold { cursor: pointer; user-select: none; }
.jfold:hover { background: rgba(78,179,154,0.08); border-radius: 3px; }
.jfold-icon { display: inline-block; width: 14px; text-align: center; color: #94aaa6; font-size: 10px; margin-right: 2px; }
.jcollapsed { display: none; }
.jcollapsed-placeholder {
    color: #94aaa6; font-size: 0.75rem;
    background: rgba(78,179,154,0.07);
    border-radius: 3px; padding: 0 6px; cursor: pointer;
}
.jcollapsed-placeholder:hover { background: rgba(78,179,154,0.14); }

/* Line numbers overlay */
.line-nums-wrap { display: flex; }
.line-nums {
    background: #eaf4f1;
    border-right: 1px solid rgba(78,179,154,0.15);
    padding: 12px 8px 12px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem; line-height: 1.6;
    color: #94aaa6; text-align: right;
    user-select: none; white-space: pre;
    min-width: 40px; flex-shrink: 0;
}

/* ── VALIDATION BANNER ── */
.valid-banner {
    display: none; padding: 0.7rem 1rem;
    border-radius: 8px; margin-bottom: 0.75rem;
    font-family: 'DM Mono', monospace; font-size: 0.78rem; font-weight: 600;
    align-items: flex-start; gap: 8px;
}
.valid-banner.show { display: flex; }
.vb-ok    { background: rgba(22,163,74,0.08);  border: 1px solid rgba(22,163,74,0.25);  color: #16a34a; }
.vb-err   { background: rgba(220,38,38,0.07);  border: 1px solid rgba(220,38,38,0.25);  color: #dc2626; }
.vb-icon  { font-size: 1rem; flex-shrink: 0; margin-top: 0px; }
.vb-body  { flex: 1; }
.vb-title { font-weight: 700; margin-bottom: 2px; }
.vb-detail { font-size: 0.72rem; font-weight: 400; opacity: 0.85; }
.err-line-link {
    font-size: 0.7rem; cursor: pointer;
    background: rgba(220,38,38,0.08); border-radius: 3px;
    padding: 1px 6px; display: inline-block; margin-top: 3px;
    border: 1px solid rgba(220,38,38,0.2);
}
.err-line-link:hover { background: rgba(220,38,38,0.15); }

/* ── STATS GRID ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff;
    border: 1px solid rgba(78,179,154,0.18);
    border-top: 2.5px solid var(--sc-color, #4eb39a);
    border-radius: 10px; padding: 0.85rem 1rem;
    transition: box-shadow 0.15s;
}
.stat-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.sc-lbl {
    font-family: 'DM Mono', monospace; font-size: 0.6rem; font-weight: 600;
    color: var(--text-muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.25rem;
}
.sc-val {
    font-family: 'DM Mono', monospace; font-size: 1.25rem; font-weight: 700;
    color: #0e2d27; line-height: 1;
}
.sc-sub { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-subtle); margin-top: 3px; }

/* ── PATH EXPLORER ── */
.path-explorer {
    background: #fff;
    border: 1px solid rgba(78,179,154,0.18);
    border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem;
}
.pe-head {
    background: #f5f9f8; padding: 0.7rem 1.2rem;
    border-bottom: 1px solid rgba(78,179,154,0.12);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
}
.pe-title { font-family: 'DM Mono', monospace; font-size: 0.68rem; font-weight: 600; color: #0e2d27; letter-spacing: 0.08em; text-transform: uppercase; }
.pe-search-wrap { display: flex; gap: 6px; align-items: center; }
.pe-search {
    background: #fff; border: 1px solid rgba(78,179,154,0.25);
    border-radius: 6px; padding: 5px 10px;
    font-family: 'DM Mono', monospace; font-size: 0.75rem; color: #0e2d27;
    outline: none; width: 220px; transition: border-color 0.15s;
}
.pe-search:focus { border-color: #4eb39a; }
.pe-body { padding: 0.75rem 1.2rem; max-height: 300px; overflow-y: auto; }
.pe-node {
    display: flex; align-items: baseline; gap: 6px;
    padding: 2px 0; border-bottom: 1px solid rgba(78,179,154,0.05);
    font-family: 'DM Mono', monospace; font-size: 0.75rem;
}
.pe-node:last-child { border-bottom: none; }
.pe-indent { color: transparent; user-select: none; }
.pe-path { color: #0e7490; font-weight: 500; flex-shrink: 0; cursor: pointer; }
.pe-path:hover { text-decoration: underline; }
.pe-sep { color: #94aaa6; flex-shrink: 0; }
.pe-val-str  { color: #15803d; }
.pe-val-num  { color: #9333ea; }
.pe-val-bool { color: #d97706; font-weight: 600; }
.pe-val-null { color: #dc2626; font-weight: 600; }
.pe-val-obj  { color: #5f7a74; font-style: italic; }
.pe-highlight { background: rgba(78,179,154,0.15); border-radius: 2px; }

/* ── ERROR DETAILS PANEL ── */
.error-panel {
    background: rgba(220,38,38,0.04);
    border: 1px solid rgba(220,38,38,0.2);
    border-radius: 10px; padding: 1rem 1.2rem;
    margin-bottom: 1.5rem; display: none;
}
.error-panel.show { display: block; }
.ep-title {
    font-family: 'DM Mono', monospace; font-size: 0.72rem; font-weight: 700;
    color: #dc2626; margin-bottom: 0.6rem;
    display: flex; align-items: center; gap: 6px;
}
.ep-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.ep-k { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: #dc2626; font-weight: 600; min-width: 70px; }
.ep-v { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: #0e2d27; }
.ep-tip {
    margin-top: 0.65rem; padding: 0.5rem 0.75rem;
    background: rgba(220,38,38,0.06); border-radius: 6px;
    font-family: 'DM Mono', monospace; font-size: 0.7rem;
    color: #5f7a74; border-left: 3px solid rgba(220,38,38,0.3);
}
.ep-tip strong { color: #dc2626; display: block; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }

/* ── TWO COL ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.5rem; }

/* ── REF TABLE ── */
.ref-table-wrap {
    background: #fff; border: 1px solid rgba(78,179,154,0.18);
    border-radius: 10px; overflow: hidden; margin-bottom: 0;
}
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th {
    padding: 0.45rem 0.9rem; text-align: left;
    font-family: 'DM Mono', monospace; font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
    background: #f5f9f8; border-bottom: 1px solid rgba(78,179,154,0.12);
}
.ref-table td {
    padding: 0.4rem 0.9rem;
    font-family: 'DM Mono', monospace; font-size: 0.72rem; color: #1a2e2b;
    border-bottom: 1px solid rgba(78,179,154,0.06);
}
.ref-table tr:last-child td { border-bottom: none; }
.ref-table tr:hover td { background: rgba(78,179,154,0.03); }
.ref-table td code {
    background: rgba(78,179,154,0.1); border-radius: 3px;
    padding: 1px 5px; font-size: 0.7rem; color: #0e7490;
}

/* ── SEO / FAQ ── */
.seo-block {
    background: #fff; border: 1px solid rgba(78,179,154,0.18);
    border-radius: 10px; padding: 1.75rem 2rem; margin-top: 2rem;
}
.seo-block h2 { font-size: 1.15rem; font-weight: 700; color: #0e2d27; margin-bottom: 0.5rem; }
.seo-block > p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.8; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-top: 1.25rem; }
.faq-card {
    background: #f5f9f8; border: 1px solid rgba(78,179,154,0.15);
    border-radius: 10px; padding: 1rem 1.1rem;
}
.faq-q { font-size: 0.875rem; font-weight: 600; color: #0e2d27; margin-bottom: 0.3rem; }
.faq-a { font-size: 0.82rem; color: var(--text-muted); line-height: 1.7; }

/* ── TOAST ── */
.ipc-toast {
    position: fixed; bottom: 1.75rem; right: 1.75rem;
    background: #0e2d27; border: 1px solid rgba(78,179,154,0.35);
    border-radius: 7px; padding: 0.55rem 1rem;
    font-family: 'DM Mono', monospace; font-size: 0.75rem; color: #6fd1b3;
    z-index: 999; transform: translateY(50px); opacity: 0;
    transition: all 0.25s; pointer-events: none;
}
.ipc-toast.show { transform: translateY(0); opacity: 1; }


/* ── VIEW TABS (Text / Tree / Table) ── */
.view-tabs {
    display: flex; gap: 3px; align-items: center;
    background: #eaf4f1;
    border: 1px solid rgba(78,179,154,0.2);
    border-radius: 7px; padding: 3px;
}
.view-tab {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem; font-weight: 500;
    padding: 4px 13px; border-radius: 5px; border: none;
    cursor: pointer; transition: all 0.15s;
    color: var(--text-muted); background: transparent; letter-spacing: 0.04em;
}
.view-tab.active { background: #4eb39a; color: #fff; font-weight: 700; }
.view-tab:not(.active):hover { background: rgba(78,179,154,0.15); color: #3a9b83; }

/* ── TREE VIEW ── */
.tree-view-wrap {
    background: #f5f9f8;
    border: 1px solid rgba(78,179,154,0.25);
    border-radius: 8px;
    min-height: 320px; max-height: 580px;
    overflow: auto;
    display: none;
}
.tree-view-wrap.active { display: block; }
.json-output-wrap.active { display: block; }
.json-output-wrap { display: block; }
.tree-root { padding: 10px 12px; font-family: 'DM Mono', monospace; font-size: 0.8rem; line-height: 1.8; }
.tree-node { padding-left: 18px; }
.tree-row { display: flex; align-items: baseline; gap: 0; white-space: nowrap; }
.tree-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex-shrink: 0;
    cursor: pointer; color: #3a9b83; font-size: 10px;
    border-radius: 3px; transition: background 0.1s; margin-right: 3px;
    user-select: none; vertical-align: middle;
}
.tree-toggle:hover { background: rgba(78,179,154,0.15); }
.tree-toggle.collapsed { transform: rotate(-90deg); }
.tree-no-toggle { display: inline-block; width: 19px; flex-shrink: 0; }
.tree-key { color: #0e7490; font-weight: 500; }
.tree-colon { color: #5f7a74; margin: 0 4px; }
.tree-val-str  { color: #15803d; }
.tree-val-num  { color: #9333ea; }
.tree-val-bool { color: #d97706; font-weight: 600; }
.tree-val-null { color: #dc2626; font-weight: 600; }
.tree-val-obj  { color: #5f7a74; }
.tree-bracket  { color: #5f7a74; font-weight: 500; }
.tree-count-badge {
    display: inline-block; font-size: 0.6rem; font-weight: 600;
    padding: 0px 6px; border-radius: 10px; margin-left: 6px;
    background: rgba(78,179,154,0.15); color: #3a9b83; border: 1px solid rgba(78,179,154,0.25);
    vertical-align: middle; font-family: 'DM Mono', monospace;
    cursor: pointer; user-select: none;
}
.tree-count-badge:hover { background: rgba(78,179,154,0.25); }
.tree-children { border-left: 1.5px solid rgba(78,179,154,0.2); margin-left: 7px; padding-left: 10px; }
.tree-children.collapsed { display: none; }

/* ── TABLE VIEW ── */
.table-view-wrap {
    background: #f5f9f8;
    border: 1px solid rgba(78,179,154,0.25);
    border-radius: 8px;
    min-height: 320px; max-height: 580px;
    overflow: auto;
    display: none;
}
.table-view-wrap.active { display: block; }
.json-table { width: 100%; border-collapse: collapse; min-width: 400px; }
.json-table th {
    position: sticky; top: 0; z-index: 1;
    padding: 0.45rem 0.9rem; text-align: left;
    font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
    background: #eaf4f1; border-bottom: 1px solid rgba(78,179,154,0.2);
    white-space: nowrap;
}
.json-table td {
    padding: 0.38rem 0.9rem;
    font-family: 'DM Mono', monospace; font-size: 0.75rem; color: #1a2e2b;
    border-bottom: 1px solid rgba(78,179,154,0.06); max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.json-table tr:hover td { background: rgba(78,179,154,0.04); }
.json-table tr:last-child td { border-bottom: none; }
.jt-idx { color: #94aaa6; font-size: 0.65rem; width: 36px; }
.jt-str  { color: #15803d; }
.jt-num  { color: #9333ea; }
.jt-bool { color: #d97706; font-weight: 600; }
.jt-null { color: #dc2626; font-weight: 600; }
.jt-obj  { color: #5f7a74; font-style: italic; }
.table-notice {
    padding: 1.5rem; text-align: center;
    font-family: 'DM Mono', monospace; font-size: 0.75rem; color: #94aaa6;
}

/* Output pane label row */
.output-label-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}

/* Drag-over state */
.drag-over .json-textarea { border-color: #4eb39a; background: rgba(78,179,154,0.04); }

@media (max-width: 900px) {
    .editor-grid { grid-template-columns: 1fr; }
    .ipc-hero-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ipc-main { padding: 1rem; }
    .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ipc-hero { padding: 2rem 1.25rem 1.75rem; }
    .seo-block { padding: 1.25rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── v2: workbench add-on ── */
.vb-warn{background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.28);color:#b45309}
.kmf-work{margin-top:1.25rem}
.kmf-work .kmsim-tabs{margin-bottom:10px}
.kmf-pane[hidden]{display:none}
.kmf-check{display:flex;gap:6px;align-items:center}
.kmf-grow{flex:1 1 220px;min-width:0}
.kmf-ex{font-size:.74rem;gap:4px;margin-top:6px}
.kmf-ex .kmsim-chip{cursor:pointer;font-family:'DM Mono',ui-monospace,monospace;font-size:.7rem;border:1px solid var(--border-mid,#cfe3dd);background:transparent;color:inherit;border-radius:999px;padding:2px 8px}
.kmf-outhead{align-items:center;gap:6px}
.kmf-out{max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.kmf-kind{padding:6px 0;border-bottom:1px solid var(--border,#e5efec)}
.kmf-open{font:inherit;font-size:.72rem;font-weight:600;background:none;border:0;color:var(--brand-dark,#0e7c66);text-decoration:underline;cursor:pointer;margin-right:8px}
a.kmsim-btn{text-decoration:none;display:inline-flex;align-items:center}
.kmsim-btn[hidden],.kmsim-card [hidden]{display:none!important}