/* ══ PAGE SHELL ════════════════════════════════════════════════════ */
.tool-hero {
    background: linear-gradient(145deg, #0a2420 0%, #0e2d27 40%, #133829 70%, #0e3530 100%);
    padding: 3.5rem 0 2.8rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tool-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(78,179,154,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,179,154,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.tool-hero::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    width: 700px; height: 400px;
    background: radial-gradient(ellipse, rgba(78,179,154,.12) 0%, transparent 68%);
    pointer-events: none;
}
.tool-hero-inner {
    position: relative;
    z-index: 1;
    animation: heroFade .65s ease both;
}
@keyframes heroFade {
    from { opacity:0; transform: translateY(14px); }
    to   { opacity:1; transform: translateY(0); }
}
.tool-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    font-weight: 500;
    color: rgba(111,209,179,.65);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tool-eyebrow::before { content: '//'; opacity: .4; }
.tool-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6fd1b3;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.8); }
}
.tool-hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: .75rem;
}
.tool-hero h1 em { font-style: normal; color: #6fd1b3; }
.tool-hero-desc {
    font-size: clamp(.88rem, 1.8vw, 1rem);
    color: rgba(255,255,255,.5);
    max-width: 560px;
    margin: 0 auto 1.5rem;
    line-height: 1.75;
}
.tool-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.tool-badge {
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: rgba(78,179,154,.12);
    color: #6fd1b3;
    border: 1px solid rgba(78,179,154,.25);
    border-radius: 20px;
    padding: 3px 11px;
}

/* ══ TOOL WRAPPER ══════════════════════════════════════════════════ */
.tool-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 20px 3rem;
}

/* ══ TOOLBAR ═══════════════════════════════════════════════════════ */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.2rem;
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: .45rem;
}
.toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
}
.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 14px;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.tb-btn:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    background: var(--accent-light);
}
.tb-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tb-btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    padding: 8px 20px;
    font-size: .88rem;
}
.tb-btn-primary:hover { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.tb-btn-danger { color: #c0392b; }
.tb-btn-danger:hover { border-color: #e74c3c; background: #fdf2f2; color: #c0392b; }

/* ══ EDITOR AREA ═══════════════════════════════════════════════════ */
.editor-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 720px) {
    .editor-row { grid-template-columns: 1fr; }
}
.editor-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border);
    gap: .5rem;
}
.editor-label {
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    gap: 7px;
}
.editor-label-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
}
.dot-left  { background: #3a9b83; }
.dot-right { background: #e67e22; }
.editor-panel textarea {
    font-family: 'DM Mono', monospace;
    font-size: .82rem;
    line-height: 1.65;
    resize: none;
    border: none;
    outline: none;
    padding: 14px 16px;
    width: 100%;
    min-height: 300px;
    color: var(--text);
    background: #fff;
}
.editor-panel textarea::placeholder { color: #aac5be; }
.editor-panel-footer {
    padding: 6px 14px;
    background: #f5f9f8;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.editor-status {
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    color: var(--text-muted);
}
.status-ok   { color: #27ae60; }
.status-err  { color: #e74c3c; }

/* ══ DIFF OUTPUT ═══════════════════════════════════════════════════ */
.diff-section {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.diff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 12px 16px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border);
}
.diff-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.diff-title svg {
    width: 16px; height: 16px;
    stroke: var(--brand); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.diff-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 500;
}
.legend-swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
}
.sw-add { background: #d5f5e3; border: 1px solid #27ae60; }
.sw-rem { background: #fadbd8; border: 1px solid #e74c3c; }
.sw-mod { background: #fef9e7; border: 1px solid #f39c12; }
.sw-unc { background: #f0f0f0; border: 1px solid #bbb; }

.diff-body {
    padding: 16px;
    overflow-x: auto;
}
.diff-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.diff-placeholder svg {
    width: 48px; height: 48px;
    stroke: #c4d9d5; fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    margin-bottom: 1rem;
    display: block;
    margin-left: auto; margin-right: auto;
}
.diff-placeholder p { font-size: .9rem; margin-bottom: .35rem; }
.diff-placeholder small { font-size: .78rem; opacity: .65; }

/* Diff tree */
.diff-tree {
    font-family: 'DM Mono', monospace;
    font-size: .8rem;
    line-height: 1.7;
    white-space: pre;
}
.diff-row {
    display: flex;
    align-items: flex-start;
    border-radius: 4px;
    padding: 1px 6px;
    margin: 1px 0;
    gap: 6px;
}
.diff-row.added   { background: #d5f5e3; color: #1a6835; }
.diff-row.removed { background: #fadbd8; color: #922b21; }
.diff-row.changed { background: #fef9e7; color: #7d5d04; }
.diff-row.neutral { color: var(--text-muted); }
.diff-gutter {
    min-width: 16px;
    font-weight: 700;
    user-select: none;
    flex-shrink: 0;
}
.diff-content { flex: 1; word-break: break-all; white-space: pre-wrap; }
.diff-old-val { text-decoration: line-through; opacity: .65; }
.diff-new-val { font-weight: 600; }

/* ══ STATS BAR ═════════════════════════════════════════════════════ */
.diff-stats {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: #f5f9f8;
    flex-wrap: wrap;
}
.diff-stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 600;
    font-family: 'DM Mono', monospace;
}
.diff-stat-item .badge {
    border-radius: 4px;
    padding: 1px 7px;
    font-size: .72rem;
}
.badge-add { background: #d5f5e3; color: #1a6835; }
.badge-rem { background: #fadbd8; color: #922b21; }
.badge-mod { background: #fef9e7; color: #7d5d04; }
.badge-unc { background: #eee;    color: #555; }

/* ══ ERROR TOAST ═══════════════════════════════════════════════════ */
.parse-error {
    font-size: .78rem;
    color: #e74c3c;
    margin-left: auto;
    font-family: 'DM Mono', monospace;
}

/* ══ INFO CARDS ════════════════════════════════════════════════════ */
.section-inner {
    padding: 3.5rem 0;
}
.section-inner + .section-inner { padding-top: 0; }
.section-alt { background: #f0f5f3; }
.section-head { margin-bottom: 2rem; }
.section-head h2 {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: .4rem;
}
.section-sub { color: var(--text-muted); font-size: .95rem; }
.section-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .55rem;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ey-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}
.info-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.info-card-icon {
    width: 36px; height: 36px;
    background: var(--accent-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
}
.info-card-icon svg {
    width: 18px; height: 18px;
    stroke: var(--brand); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.info-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: var(--text);
}
.info-card p {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ══ FAQ ═══════════════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: .8rem; }
.faq-item {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.faq-q {
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-q:hover { color: var(--brand-dark); }
.faq-q svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2.2; stroke-linecap: round;
    flex-shrink: 0;
    transition: transform .2s;
}
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a {
    display: none;
    padding: 0 1.25rem 1rem;
    font-size: .87rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.faq-item.open .faq-a { display: block; }

/* ══ CARD GRID (from site theme) ══════════════════════════════════ */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
}
.card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .18s, border-color .18s, transform .18s;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.card:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 18px rgba(78,179,154,.12);
    transform: translateY(-2px);
}
.card h3 { font-size: .95rem; font-weight: 700; color: var(--text); }
.card p  { font-size: .83rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-light);
    color: var(--brand-dark);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s;
    cursor: pointer;
    align-self: flex-start;
    margin-top: .35rem;
}
.btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ══ BREADCRUMB (from site theme) ═════════════════════════════════ */
.breadcrumb-bar {
    background: var(--accent-light);
    border-bottom: 1px solid var(--border);
    padding: .55rem 0;
}
.breadcrumb {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.breadcrumb a { color: var(--brand-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 .25rem; opacity: .5; }
.breadcrumb .active { color: var(--text); }

/* ══ RESPONSIVE ════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-group { flex-wrap: wrap; }
    .diff-legend { gap: .6rem; }
}

/* ══ v2: options, tools, side-by-side (km-json-engine) ══════════════ */
.status-warn{color:#b45309}
.cmp-opts{border:1.5px solid var(--border);border-radius:var(--radius);padding:.7rem .9rem;margin:0 0 .9rem;display:flex;flex-direction:column;gap:.55rem;font-size:.8rem;background:var(--surface,#fff);min-width:0}
.cmp-opts-row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end}
.cmp-opts-row>label{display:flex;flex-direction:column;gap:.2rem;font-weight:600;color:var(--text);min-width:0;flex:1 1 200px}
.cmp-opts select,.cmp-opts input:not([type]),.cmp-opts textarea,.cmp-filters input{font:inherit;font-weight:400;padding:.38rem .5rem;border:1.5px solid var(--border);border-radius:8px;background:var(--surface,#fff);color:var(--text);min-width:0;width:100%;box-sizing:border-box}
.cmp-checks>label{flex:0 1 auto;flex-direction:row;align-items:center;font-weight:500;gap:.35rem}
.cmp-ignore summary{cursor:pointer;font-weight:600}
.cmp-ignore textarea{font-family:'DM Mono',ui-monospace,monospace;font-size:.76rem;margin:.4rem 0 .2rem;resize:vertical}
.cmp-faint{color:var(--text-muted);font-size:.74rem}
.cmp-msg{font-size:.82rem;padding:.55rem .8rem;border-radius:8px;margin:0 0 .8rem;overflow-wrap:anywhere}
.cmp-msg.err{background:rgba(220,38,38,.08);color:#b91c1c;border:1px solid rgba(220,38,38,.25)}
.cmp-msg.ok{background:rgba(22,163,74,.08);color:#15803d;border:1px solid rgba(22,163,74,.25)}
.cmp-link{background:none;border:0;padding:0 .2rem;color:var(--brand-dark,#0e7c66);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.cmp-open{font-size:.72rem;margin-left:auto}
textarea.cmp-drop{outline:2px dashed var(--brand);outline-offset:-4px}
.cmp-tools{border-bottom:1px solid var(--border);padding:.55rem .8rem;display:flex;flex-direction:column;gap:.45rem;font-size:.78rem}
.cmp-tools[hidden]{display:none}
.cmp-tabs{display:flex;gap:.3rem}
.cmp-tab{font:inherit;font-weight:600;padding:.3rem .75rem;border:1.5px solid var(--border);border-radius:999px;background:transparent;color:var(--text);cursor:pointer}
.cmp-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.cmp-filters{display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center}
.cmp-filters input[id]{flex:1 1 180px;width:auto}
.cmp-chip{display:inline-flex;align-items:center;gap:.25rem;font-weight:600}
.cmp-chip-add{color:#15803d}.cmp-chip-remove{color:#b91c1c}.cmp-chip-change{color:#a16207}.cmp-chip-move{color:#1d4ed8}
.cmp-nav{display:inline-flex;gap:.25rem}.cmp-nav .tb-btn{padding:.2rem .55rem}
.cmp-export{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center;color:var(--text-muted)}
.diff-row.moved{background:#e0ecff;color:#1e3a8a}
.sw-mov{background:#e0ecff;border:1px solid #3b82f6}
.badge-mov{background:#e0ecff;color:#1e3a8a}
.diff-row.cmp-cur,.cmp-side tr.cmp-cur td{outline:2px solid var(--brand);outline-offset:-2px}
.cmp-path{font-weight:600;cursor:copy}
.cmp-key{font-size:.7rem;padding:0 .3rem;border-radius:4px;background:rgba(0,0,0,.06)}
.cmp-more{text-align:center;padding:.8rem}
.cmp-same svg,.cmp-same p{color:#27ae60;stroke:#27ae60;font-weight:700}
.cmp-side-note{padding:.4rem .2rem}
.cmp-side-wrap{overflow:auto;max-height:70vh;border:1px solid var(--border);border-radius:8px}
.cmp-side{border-collapse:collapse;width:100%;table-layout:fixed;font-family:'DM Mono',ui-monospace,monospace;font-size:.74rem}
.cmp-side td{padding:0 .4rem;white-space:pre-wrap;word-break:break-all;vertical-align:top;line-height:1.5}
.cmp-side td.cmp-ln{color:var(--text-muted);text-align:right;user-select:none;border-right:1px solid var(--border);font-size:.68rem}
.cmp-side tr.cmp-chg td.cmp-l,.cmp-side tr.cmp-del td.cmp-l{background:#fadbd8;color:#922b21}
.cmp-side tr.cmp-chg td.cmp-r,.cmp-side tr.cmp-add td.cmp-r{background:#d5f5e3;color:#1a6835}
.cmp-side tr.cmp-fold td{text-align:center;background:rgba(0,0,0,.03)}
.cmp-out{border:1.5px solid var(--border);border-radius:var(--radius);margin-top:.9rem;overflow:hidden}
.cmp-out[hidden]{display:none}
.cmp-out-head{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;padding:.5rem .8rem;background:var(--accent-light);border-bottom:1px solid var(--border);font-size:.8rem}
.cmp-out-head span{display:flex;gap:.3rem}.cmp-out-head .tb-btn{padding:.25rem .6rem;font-size:.74rem}
.cmp-pre{margin:0;padding:.7rem .9rem;max-height:420px;overflow:auto;font-size:.74rem;white-space:pre-wrap;word-break:break-all}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .diff-row.moved,:root:not([data-theme="light"]) .badge-mov{background:rgba(59,130,246,.18);color:#93c5fd}
 :root:not([data-theme="light"]) .cmp-side tr.cmp-chg td.cmp-l,:root:not([data-theme="light"]) .cmp-side tr.cmp-del td.cmp-l{background:rgba(220,38,38,.18);color:#fca5a5}
 :root:not([data-theme="light"]) .cmp-side tr.cmp-chg td.cmp-r,:root:not([data-theme="light"]) .cmp-side tr.cmp-add td.cmp-r{background:rgba(22,163,74,.18);color:#86efac}
 :root:not([data-theme="light"]) .cmp-msg.err{color:#fca5a5}:root:not([data-theme="light"]) .cmp-msg.ok{color:#86efac}
}
:root[data-theme="dark"] .diff-row.moved,:root[data-theme="dark"] .badge-mov{background:rgba(59,130,246,.18);color:#93c5fd}
:root[data-theme="dark"] .cmp-side tr.cmp-chg td.cmp-l,:root[data-theme="dark"] .cmp-side tr.cmp-del td.cmp-l{background:rgba(220,38,38,.18);color:#fca5a5}
:root[data-theme="dark"] .cmp-side tr.cmp-chg td.cmp-r,:root[data-theme="dark"] .cmp-side tr.cmp-add td.cmp-r{background:rgba(22,163,74,.18);color:#86efac}
:root[data-theme="dark"] .cmp-msg.err{color:#fca5a5}:root[data-theme="dark"] .cmp-msg.ok{color:#86efac}
@media (max-width:640px){.cmp-side{font-size:.66rem}.cmp-side col:nth-child(1),.cmp-side col:nth-child(3){width:2.4em}}