:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-alt: #eef2f7;
    --text: #0f172a;
    --text-muted: #475569;
    --primary: #2563eb;
    --secondary: #0ea5e9;
    --accent: #f59e0b;
    --danger: #dc2626;
    --border: #d9e2f0;
    --shadow: 0 12px 30px rgba(17, 34, 64, 0.08);
    --editor-font-size: 14px;
    --editor-line-height: 24px;
    --editor-pad-y: 10px;
    --editor-font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Monaco", "Menlo", "Consolas", monospace;

    /* Dark mode semantic tokens — light defaults */
    --body-bg-start: #f8fbff;
    --body-bg-end: var(--bg);
    --header-bg: rgba(255, 255, 255, 0.92);
    --header-border: #dbe8fb;
    --header-shadow: 0 2px 18px rgba(16, 33, 56, 0.05);
    --nav-link-color: #2c4770;
    --nav-link-hover-bg: #ecf4ff;
    --nav-link-hover-color: #0f4fb8;
    --nav-active-bg: #edf4ff;
    --nav-active-color: #0f4fb8;
    --nav-active-shadow: inset 0 0 0 1px #d6e5ff;
    --editor-bg: #f3f4f6;
    --editor-wrap-bg: #fff;
    --line-numbers-bg: #f2f7ff;
    --line-numbers-color: #6a7d9f;
    --fold-color: #526a93;
    --fold-hover-color: #1f4d92;
    --selection-bg: #ffe08a;
    --selection-color: #1f2937;
    --match-line-bg: #ffe8a3;
    --match-line-color: #7a4b00;
    --panel-bg: #fbfdff;
    --panel-header-bg: #2f4158;
    --toolbar-bg-start: #2b3543;
    --toolbar-bg-end: #3a4556;
    --toolbar-border-top: rgba(255, 255, 255, 0.18);
    --controls-bg: #dff6ef;
    --controls-border: #bfe8d9;
    --controls-label-color: #234a3f;
    --controls-input-border: #a8d7dd;
    --controls-input-bg: #f8fafc;
    --controls-input-color: #1f2937;
    --fix-preview-bg: #cdeee2;
    --fix-preview-border: #a9dcc9;
    --fix-preview-color: #1f3f35;
    --statusbar-bg: #e7edf6;
    --statusbar-border: #c8d7ec;
    --statusbar-color: #4b6387;
    --tree-view-bg: #fbfdff;
    --tree-key-color: #234f9f;
    --tree-type-color: #546b8f;
    --tree-leaf-color: #21324f;
    --tree-toggle-color: #3f5f8e;
    --tree-mark-bg: #ffe69a;
    --modal-bg: radial-gradient(circle at 20% 10%, rgba(58, 130, 246, 0.24), rgba(16, 32, 53, 0.6));
    --modal-card-bg: #ffffff;
    --modal-card-border: #d3e1f2;
    --modal-card-shadow: 0 26px 80px rgba(15, 31, 49, 0.32);
    --command-bg: rgba(17, 34, 64, 0.35);
    --command-card-bg: #ffffff;
    --command-item-bg: #f5f9ff;
    --command-item-hover-bg: #e9f2ff;
    --search-btn-bg: #f5f8ff;
    --search-btn-border: #b7c9e6;
    --search-btn-color: #2d4f82;
    --search-btn-hover-bg: #e7efff;
    --advanced-card-bg-start: #fdfefe;
    --advanced-card-bg-end: #f6fbff;
    --advanced-card-border: #d6e5f5;
    --advanced-h4-color: #1f4463;
    --btn-secondary-bg: var(--surface-alt);
    --btn-secondary-color: var(--text);
    --btn-secondary-border: var(--border);
    --btn-warning-bg: #fff3e8;
    --btn-warning-color: #8b4a10;
    --btn-warning-border: #ffd6ad;
    --card-bg: var(--surface);
    --card-border: var(--border);
    --footer-bg: #0f274f;
    --footer-color: #d7e6ff;
    --footer-link-color: #cde0ff;
    --footer-heading-color: #fff;
    --footer-border: rgba(255, 255, 255, 0.18);
    --ad-placeholder-border: #9cb5d8;
    --ad-placeholder-bg: #f8fbff;
    --ad-placeholder-color: #58729d;
    --usage-section-bg: rgba(255, 255, 255, 0.22);
    --usage-section-border: #d8e8fd;
    --related-card-bg: var(--surface-alt);
    --mobile-tab-bg: #f3f8ff;
    --mobile-tab-color: #294a75;
    --mobile-tab-active-bg: #2d4761;
    --mobile-tab-active-color: #fff;
    --checkbox-label-color: #234a3f;
    --help-tip-border: rgba(35, 74, 63, 0.45);
    --help-tip-color: #1d4f42;
    --help-tip-bg: rgba(255, 255, 255, 0.72);
    --match-count-color: #1f3f35;
    --diff-summary-bg: #f2f8ff;
    --inline-check-bg: #f2f8ff;
    --processing-color: #3f5f8e;
    --search-count-color: #5a6c89;
    --input-bg: #fff;
    --textarea-bg: #fff;
}

[data-theme="dark"] {
    --bg: #0f1219;
    --surface: #181d27;
    --surface-alt: #1e2433;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #3b82f6;
    --secondary: #38bdf8;
    --accent: #fbbf24;
    --danger: #f87171;
    --border: #2a3344;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.3);

    --body-bg-start: #0c0f16;
    --body-bg-end: var(--bg);
    --header-bg: rgba(18, 22, 32, 0.94);
    --header-border: #1e2a3e;
    --header-shadow: 0 2px 18px rgba(0, 0, 0, 0.2);
    --nav-link-color: #94a3b8;
    --nav-link-hover-bg: rgba(59, 130, 246, 0.12);
    --nav-link-hover-color: #93c5fd;
    --nav-active-bg: rgba(59, 130, 246, 0.15);
    --nav-active-color: #93c5fd;
    --nav-active-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
    --editor-bg: #141820;
    --editor-wrap-bg: #181d27;
    --line-numbers-bg: #141820;
    --line-numbers-color: #4a5568;
    --fold-color: #64748b;
    --fold-hover-color: #93c5fd;
    --selection-bg: #3b5998;
    --selection-color: #e2e8f0;
    --match-line-bg: rgba(251, 191, 36, 0.18);
    --match-line-color: #fbbf24;
    --panel-bg: #181d27;
    --panel-header-bg: #1a2234;
    --toolbar-bg-start: #151b26;
    --toolbar-bg-end: #1a2234;
    --toolbar-border-top: rgba(255, 255, 255, 0.06);
    --controls-bg: #151d2a;
    --controls-border: #1e2d3d;
    --controls-label-color: #94a3b8;
    --controls-input-border: #2a3a4e;
    --controls-input-bg: #141820;
    --controls-input-color: #e2e8f0;
    --fix-preview-bg: #162230;
    --fix-preview-border: #1e3345;
    --fix-preview-color: #94a3b8;
    --statusbar-bg: #141820;
    --statusbar-border: #2a3344;
    --statusbar-color: #64748b;
    --tree-view-bg: #141820;
    --tree-key-color: #93c5fd;
    --tree-type-color: #64748b;
    --tree-leaf-color: #e2e8f0;
    --tree-toggle-color: #64748b;
    --tree-mark-bg: rgba(251, 191, 36, 0.25);
    --modal-bg: radial-gradient(circle at 20% 10%, rgba(59, 130, 246, 0.12), rgba(0, 0, 0, 0.7));
    --modal-card-bg: #1a2030;
    --modal-card-border: #2a3344;
    --modal-card-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
    --command-bg: rgba(0, 0, 0, 0.5);
    --command-card-bg: #1a2030;
    --command-item-bg: #1e2433;
    --command-item-hover-bg: rgba(59, 130, 246, 0.12);
    --search-btn-bg: #1e2433;
    --search-btn-border: #2a3a4e;
    --search-btn-color: #94a3b8;
    --search-btn-hover-bg: rgba(59, 130, 246, 0.12);
    --advanced-card-bg-start: #1a2030;
    --advanced-card-bg-end: #151d2a;
    --advanced-card-border: #2a3344;
    --advanced-h4-color: #93c5fd;
    --btn-secondary-bg: #1e2433;
    --btn-secondary-color: #e2e8f0;
    --btn-secondary-border: #2a3344;
    --btn-warning-bg: rgba(251, 191, 36, 0.12);
    --btn-warning-color: #fbbf24;
    --btn-warning-border: rgba(251, 191, 36, 0.25);
    --card-bg: var(--surface);
    --card-border: var(--border);
    --footer-bg: #0a0e16;
    --footer-color: #94a3b8;
    --footer-link-color: #93c5fd;
    --footer-heading-color: #e2e8f0;
    --footer-border: rgba(255, 255, 255, 0.08);
    --ad-placeholder-border: #2a3344;
    --ad-placeholder-bg: #141820;
    --ad-placeholder-color: #4a5568;
    --usage-section-bg: rgba(255, 255, 255, 0.03);
    --usage-section-border: #2a3344;
    --related-card-bg: #1e2433;
    --mobile-tab-bg: #1e2433;
    --mobile-tab-color: #94a3b8;
    --mobile-tab-active-bg: #3b82f6;
    --mobile-tab-active-color: #fff;
    --checkbox-label-color: #94a3b8;
    --help-tip-border: rgba(148, 163, 184, 0.3);
    --help-tip-color: #94a3b8;
    --help-tip-bg: rgba(30, 36, 51, 0.8);
    --match-count-color: #94a3b8;
    --diff-summary-bg: #1e2433;
    --inline-check-bg: #1e2433;
    --processing-color: #64748b;
    --search-count-color: #64748b;
    --input-bg: #141820;
    --textarea-bg: #141820;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text);
    background: linear-gradient(180deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
    line-height: 1.6;
    transition: background-color 200ms ease, color 200ms ease;
}

h1, h2, h3 {
    font-weight: 900;
    letter-spacing: -0.01em;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.instant-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(20, 33, 54, 0.96);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.45rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 260px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.toast-stack {
    position: fixed;
    top: 82px;
    right: 16px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    min-width: 220px;
    max-width: 420px;
    border-radius: 0.6rem;
    padding: 0.55rem 0.75rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 10px 24px rgba(12, 32, 58, 0.25);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    background: #1b8f67;
}

.toast.error {
    background: #c23845;
}

.container {
    width: min(1900px, 99%);
    margin: 0 auto;
}

/* ============================================================
   HEADER — Modern 2026 redesign
   Thinner, cleaner, Inter-inspired. Pill nav, subtle border.
   ============================================================ */

.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--header-shadow);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0;
    min-height: 52px;
    gap: 1rem;
}

/* Brand — compact, no oversized text */
.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}

.brand:hover { text-decoration: none; }

.brand-text {
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 1.1rem;
    line-height: 1;
}

.brand-mark {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 0.45rem;
    background: linear-gradient(140deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}

/* Nav — pill container */
.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.2rem;
    margin: 0;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.nav-list a {
    display: inline-flex;
    align-items: center;
    height: 1.7rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: -0.01em;
    color: var(--nav-link-color);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.nav-list a:hover {
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.nav-list a.is-active,
.nav-list a[aria-current="page"] {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .nav-list a.is-active,
[data-theme="dark"] .nav-list a[aria-current="page"] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.nav-list a:focus-visible,
.brand:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .nav-wrap {
        min-height: 48px;
        gap: 0.5rem;
    }

    .brand-text {
        font-size: 0.95rem;
    }

    .brand-mark {
        width: 1.45rem;
        height: 1.45rem;
    }

    .nav-list a {
        height: 1.55rem;
        padding: 0 0.5rem;
        font-size: 0.76rem;
    }
}

@media (max-width: 600px) {
    .nav-list {
        gap: 0;
        padding: 0.15rem;
    }

    .nav-list a {
        padding: 0 0.4rem;
        font-size: 0.72rem;
    }
}

.hero {
    margin: 2.2rem auto;
    background: linear-gradient(130deg, #0f62fe, #0ea5e9, #15c39a);
    border-radius: 1.1rem;
    color: #fff;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.hero h1 { margin-top: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.hero p { font-size: 1.05rem; max-width: 70ch; }
.hero .cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }

.button {
    border: 0;
    border-radius: 0.7rem;
    padding: 0.6rem 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
}
.button-primary { background: var(--primary); color: #fff; }
.button-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid var(--btn-secondary-border); }
.button-warning { background: var(--btn-warning-bg); color: var(--btn-warning-color); border: 1px solid var(--btn-warning-border); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.tool-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.9rem;
    padding: 1rem;
    box-shadow: var(--shadow);
    transition: background-color 200ms ease, border-color 200ms ease;
}

/* Tool hero — 2026 minimal style */
.tool-hero {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.tool-hero-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 0.4rem;
    color: var(--text);
}

.tool-hero-intro {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 60ch;
}

/* Legacy selectors kept for backward compat */
.tool-hero .lead { color: var(--text-muted); margin: 0.4rem 0 0; }
.tool-hero h1 { font-size: clamp(1.65rem, 3.15vw, 2.65rem); line-height: 1.12; margin: 0; }
.tool-hero h2 { font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.16; margin: 0; }
.tool-layout { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 0.5rem; }
.tool-main {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.6rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.changelog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.changelog-list {
    display: grid;
    gap: 1rem;
}

.changelog-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
}

.changelog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.changelog-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.changelog-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.56rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface-alt);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.changelog-item ul {
    margin: 0;
    padding-left: 1.15rem;
}

.changelog-item li {
    margin: 0.3rem 0;
}

.changelog-note {
    margin-top: 1rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
}

.changelog-note h2 {
    margin-top: 0;
}

.tool-description { color: var(--text-muted); }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.panel {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.75rem;
}
.panel h3 { margin: 0 0 0.5rem; }

textarea, input[type="text"] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.65rem;
    font: inherit;
    background: var(--input-bg);
    color: var(--text);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
textarea { min-height: 380px; resize: vertical; background: var(--textarea-bg); }

.editor-with-lines {
    display: grid;
    grid-template-columns: var(--gutter-width, 56px) 1fr;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--editor-wrap-bg);
}

.line-numbers {
    background: var(--line-numbers-bg);
    border-right: 1px solid var(--border);
    color: var(--line-numbers-color);
    padding: var(--editor-pad-y) 0.25rem;
    font-family: var(--editor-font-family);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    white-space: normal;
    user-select: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.editor-with-lines textarea {
    border: 0;
    border-radius: 0;
    margin: 0;
    font-family: var(--editor-font-family);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    padding: var(--editor-pad-y) 0.65rem;
    overflow: auto;
    white-space: pre;
    tab-size: 2;
    -moz-tab-size: 2;
}

.editor-with-lines textarea.is-error-view {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.editor-with-lines textarea::selection {
    background: var(--selection-bg);
    color: var(--selection-color);
}

.line-row {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: center;
    gap: 0.2rem;
    height: var(--editor-line-height);
    padding-right: 0.25rem;
}

.line-row.is-active-match {
    background: var(--match-line-bg);
    border-radius: 0.22rem;
}

.line-row.is-active-match .line-num,
.line-row.is-active-match .fold-toggle {
    color: var(--match-line-color);
    font-weight: 700;
}

.fold-toggle,
.fold-spacer {
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fold-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--fold-color);
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1;
}

.fold-toggle .icon-svg {
    width: 0.75rem;
    height: 0.75rem;
}

.fold-toggle:hover {
    color: var(--fold-hover-color);
}

.line-num {
    min-width: 2ch;
    text-align: right;
    justify-self: end;
}

.tree-panel {
    margin-top: 1rem;
}

.tree-view {
    min-height: 220px;
    max-height: 480px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--tree-view-bg);
    padding: 0.65rem;
}

.tree-root,
.tree-root ul {
    list-style: none;
    margin: 0;
    padding-left: 1rem;
}

.tree-label {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    font-family: var(--editor-font-family);
    font-size: 0.9rem;
    margin: 0.2rem 0;
}

.tree-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--tree-toggle-color);
    padding: 0;
    width: 1rem;
    line-height: 1;
}

.tree-toggle .icon-svg {
    width: 0.8rem;
    height: 0.8rem;
}

.tree-key { color: var(--tree-key-color); font-weight: 600; }
.tree-type { color: var(--tree-type-color); }
.tree-leaf-text { color: var(--tree-leaf-color); }
.tree-leaf-spacer { color: var(--tree-type-color); width: 1rem; display: inline-block; text-align: center; }
.tree-children.collapsed { display: none; }
.tree-view mark { background: var(--tree-mark-bg); padding: 0 0.1rem; border-radius: 0.2rem; }

.tree-loading {
    font-weight: 700;
    color: var(--tree-type-color);
    padding: 0.45rem;
}

/* JSON Formatter inspired workbench layout */
body[data-tool="json-formatter-validator"] .tool-main {
    background: var(--surface);
    border-color: var(--border);
}

.jsonf-workbench {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 260px minmax(300px, 1fr);
    gap: 0.5rem;
    align-items: stretch;
}

.jsonf-workbench > * {
    min-width: 0;
}

.jsonf-editor-panel,
.jsonf-controls {
    padding: 0;
    overflow: hidden;
}

.jsonf-editor-panel h3,
.jsonf-controls h3 {
    margin: 0 0 0.35rem;
    padding: 0.4rem 0.6rem;
    background: var(--panel-header-bg);
    color: #fff;
    border-radius: 0.8rem 0.8rem 0 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jsonf-controls h3 {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 0.5rem;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(90deg, var(--toolbar-bg-start) 0%, var(--toolbar-bg-end) 100%);
    margin: 0 0 0.35rem;
    padding: 0.25rem 0.4rem;
    border-top: 1px solid var(--toolbar-border-top);
}

.jsonf-editor-panel .editor-searchbar,
.jsonf-editor-panel .editor-with-lines,
.jsonf-editor-panel .editor-statusbar {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #f3f7fd;
    border-radius: 0.4rem;
    min-width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 2px rgba(10, 20, 40, 0.16);
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.18);
}

.icon-btn:focus-visible {
    outline: 2px solid #8ec5ff;
    outline-offset: 1px;
}

.icon-svg {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

#outputToolbarTreeBtn.is-active {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(147, 197, 253, 0.75);
}

.editor-searchbar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) repeat(6, auto) minmax(56px, auto);
    align-items: center;
    gap: 0.35rem;
    margin: -0.2rem 0 0.6rem;
    overflow: hidden;
    padding-bottom: 0.15rem;
}

.editor-searchbar input[type="text"] {
    min-height: 1.75rem;
    min-width: 0;
    width: 100%;
}

.editor-searchbar .icon-btn {
    border: 1px solid var(--search-btn-border);
    background: var(--search-btn-bg);
    color: var(--search-btn-color);
    border-radius: 0.45rem;
    box-shadow: 0 1px 2px rgba(24, 45, 79, 0.08);
}

.editor-searchbar .icon-btn:hover {
    background: var(--search-btn-hover-bg);
    color: var(--nav-link-hover-color);
    border-color: var(--search-btn-border);
}

.search-count {
    font-size: 0.85rem;
    color: var(--search-count-color);
    font-weight: 700;
    min-width: 3.6rem;
    text-align: right;
}

.search-opt-btn {
    min-width: 2.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--search-btn-color);
}

.search-opt-btn.is-active {
    background: #2d75ea;
    border-color: #2d75ea;
    color: #fff;
    box-shadow: 0 2px 8px rgba(45, 117, 234, 0.35);
}

.search-highlight-layer {
    display: none !important;
}

@media (max-width: 1440px) {
    .editor-searchbar {
        grid-template-columns: minmax(140px, 1fr) repeat(6, auto) minmax(52px, auto);
    }
}

.jsonf-editor-panel .editor-with-lines {
    height: 600px;
    max-width: 100%;
}

.jsonf-editor-panel .editor-with-lines textarea {
    height: 600px;
    min-height: 0;
    background: var(--editor-bg);
    max-width: 100%;
}

.jsonf-controls {
    background: var(--controls-bg);
    border-color: var(--controls-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    top: 0;
    max-height: 648px;
    overflow-y: auto;
    overflow-x: visible;
    margin-top: 0;
}

#actionsPane {
    align-self: start;
    margin-top: 0 !important;
}

.jsonf-controls > :not(h3) {
    margin-left: 0.45rem;
    margin-right: 0.45rem;
    max-width: calc(100% - 0.9rem);
}

.jsonf-controls .button {
    width: 100%;
}

/* Primary CTA — large, prominent */
.button-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    border-radius: 0.7rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.button-cta:hover {
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.button-cta:active {
    transform: translateY(0);
}

.button-cta .icon-svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Quick row — two buttons side by side */
.actions-quick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.actions-quick-row .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.5rem;
}

.actions-quick-row .button .icon-svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Collapsible sections */
.actions-section {
    border: 1px solid var(--controls-border);
    border-radius: 0.55rem;
    background: var(--fix-preview-bg);
    overflow: hidden;
}

.actions-section > summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--controls-label-color);
    padding: 0.45rem 0.65rem;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actions-section > summary::-webkit-details-marker {
    display: none;
}

.actions-section > summary::after {
    content: "▸";
    font-size: 0.75rem;
    transition: transform 150ms ease;
}

.actions-section[open] > summary::after {
    transform: rotate(90deg);
}

.actions-section-body {
    padding: 0.35rem 0.65rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.actions-section-body label {
    font-size: 0.85rem;
}

.actions-section-body select,
.actions-section-body input[type="text"] {
    font-size: 0.88rem;
}

.jsonf-controls label {
    color: var(--controls-label-color);
    font-weight: 700;
    margin-top: 0.35rem;
}

.jsonf-controls input[type="text"] {
    border: 1px solid var(--controls-input-border);
    width: 100%;
    background: var(--controls-input-bg);
    color: var(--controls-input-color);
}

.jsonf-controls select {
    border: 1px solid var(--controls-input-border);
    width: 100%;
    border-radius: 0.55rem;
    min-height: 2.45rem;
    padding: 0.45rem 0.55rem;
    background: var(--controls-input-bg);
    color: var(--controls-input-color);
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--checkbox-label-color);
}

.checkbox-inline input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--help-tip-border);
    color: var(--help-tip-color);
    background: var(--help-tip-bg);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    position: relative;
}

.help-tip:hover::after,
.help-tip:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    right: -0.4rem;
    left: auto;
    top: calc(100% + 8px);
    transform: none;
    width: min(240px, 68vw);
    min-height: 3.2rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    background: rgba(20, 33, 54, 0.96);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
    z-index: 25;
    white-space: normal;
}

.help-tip:focus-visible {
    outline: 2px solid #8ec5ff;
    outline-offset: 1px;
}

.fix-preview {
    background: var(--fix-preview-bg);
    border: 1px solid var(--fix-preview-border);
    border-radius: 0.55rem;
    padding: 0.45rem 0.65rem 0.6rem;
    color: var(--fix-preview-color);
}

.fix-preview summary {
    cursor: pointer;
    font-weight: 900;
    list-style: none;
    margin-bottom: 0.4rem;
}

.fix-preview summary::-webkit-details-marker {
    display: none;
}

.fix-preview summary::after {
    content: "▾";
    float: right;
    font-size: 0.85rem;
    opacity: 0.9;
}

.fix-preview:not([open]) summary::after {
    content: "▸";
}

.fix-preview p {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
}

.fix-preview ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.84rem;
}

.match-nav-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.45rem;
}

.match-count {
    color: var(--match-count-color);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
}

.advanced-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.advanced-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--surface-alt);
}

.advanced-group h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.advanced-group h4 .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.6;
}

/* Input + button on one row */
.advanced-field-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    align-items: center;
}

.advanced-field-row input[type="text"] {
    min-height: 2.2rem;
    font-size: 0.88rem;
}

.advanced-field-row .button {
    min-height: 2.2rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Two buttons side by side */
.advanced-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.advanced-btn-row .button {
    font-size: 0.85rem;
    padding: 0.45rem 0.5rem;
}

.is-hidden {
    display: none !important;
}

.mobile-tabs {
    display: none;
}

.diff-summary-panel .diff-summary {
    font-weight: 700;
    color: var(--text);
    background: var(--diff-summary-bg);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.7rem;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--inline-check-bg);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.45rem 0.65rem;
    font-weight: 600;
}

body[data-tool="json-formatter-validator"] .tree-panel h3 {
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 1rem;
}

.tree-panel-head {
    margin: -0.6rem -0.6rem 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--panel-header-bg);
    border-radius: 0.8rem 0.8rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

#treePanelCollapseBtn {
    width: auto;
    min-width: 130px;
    padding: 0.4rem 0.75rem;
    font-size: 0.84rem;
}

.pane-resizer {
    display: none;
}

.editor-statusbar {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--statusbar-color);
    background: var(--statusbar-bg);
    border: 1px solid var(--statusbar-border);
    border-radius: 0.35rem;
    padding: 0.2rem 0.45rem;
    font-weight: 600;
}

.transform-modal {
    position: fixed;
    inset: 0;
    background: var(--modal-bg);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    z-index: 1200;
    padding: 1rem;
}

.transform-modal-card {
    width: min(900px, 96vw);
    background: var(--modal-card-bg);
    border: 1px solid var(--modal-card-border);
    border-radius: 1rem;
    box-shadow: var(--modal-card-shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.transform-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.transform-modal-head h3 {
    margin: 0;
    font-size: 1.08rem;
    color: var(--text);
}

#advancedModal .transform-modal-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.55rem;
    margin-bottom: 0.15rem;
}

.advanced-modal-foot {
    margin-top: 0.15rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.advanced-modal-foot kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.06rem 0.3rem;
    margin: 0 0.15rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 0.3rem;
    background: var(--surface-alt);
    color: var(--text);
    font: inherit;
    font-size: 0.76rem;
}

/* Modal close button — consistent style */
.modal-close-btn {
    border: 1px solid var(--border) !important;
    background: var(--surface-alt) !important;
    color: var(--text) !important;
    border-radius: 0.45rem;
}

.modal-close-btn:hover {
    background: var(--nav-link-hover-bg) !important;
}

#advancedModal #closeAdvancedBtn {
    border-color: var(--border);
    background: var(--surface-alt);
    color: var(--text);
}

#advancedModal #closeAdvancedBtn:hover {
    background: var(--nav-link-hover-bg);
}

/* Transform (JMESPath) modal */
.transform-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.transform-modal-card label {
    color: var(--text);
    font-weight: 700;
}

#transformPreviewText {
    min-height: 190px;
    resize: vertical;
}

.transform-actions {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
}

@media (max-width: 860px) {
    .advanced-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .jsonf-workbench {
        grid-template-columns: 1fr;
    }

    .jsonf-controls {
        position: static;
        top: auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .mobile-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        grid-column: 1 / -1;
    }

    .mobile-tab {
        border: 1px solid var(--border);
        background: var(--mobile-tab-bg);
        border-radius: 0.5rem;
        padding: 0.45rem 0.4rem;
        font-weight: 700;
        color: var(--mobile-tab-color);
    }

    .mobile-tab.is-active {
        background: var(--mobile-tab-active-bg);
        color: var(--mobile-tab-active-color);
        border-color: var(--mobile-tab-active-bg);
    }

    .mobile-pane-hidden {
        display: none !important;
    }

    .pane-resizer {
        display: none;
    }

    .jsonf-editor-panel .editor-with-lines,
    .jsonf-editor-panel .editor-with-lines textarea {
        min-height: 420px;
    }
}

.controls { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.8rem 0; }
.meta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.meta-row label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }

/* ============================================================
   CONSISTENT TOOL PAGE LAYOUT — Task 9
   Shared by Base64, Regex, CSV, JSON-to-TypeScript, JSON Diff
   ============================================================ */

/* Action bar — matches v2 formatter style */
.tool-action-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.tool-action-sep {
    width: 1px;
    height: 1.4rem;
    background: var(--border);
    margin: 0 0.1rem;
    flex-shrink: 0;
}

.tool-action-bar .button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.tool-action-bar .button .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Inline checkbox in action bar */
.tool-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    padding: 0 0.25rem;
}

.tool-inline-check input[type="checkbox"] {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0;
    accent-color: var(--primary);
}

/* Two-panel split */
.tool-panel-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

/* Individual panel */
.tool-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface);
}

/* Panel header */
.tool-panel-head {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    min-height: 1.75rem;
}

.tool-panel-head span {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

/* Editor textarea */
.tool-editor {
    flex: 1;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0.6rem 0.65rem;
    font-family: var(--editor-font-family);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    background: var(--editor-bg);
    color: var(--text);
    resize: none;
    min-height: 320px;
    width: 100%;
    white-space: pre;
    overflow: auto;
    tab-size: 2;
}

.tool-editor::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-style: italic;
    font-family: inherit;
}

/* Status text */
.tool-status {
    min-height: 1.4rem;
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tool-status.error { color: var(--danger); }
.tool-status.success { color: #16a34a; }
[data-theme="dark"] .tool-status.success { color: #4ade80; }

/* Regex-specific inputs */
.tool-regex-inputs {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
}

.tool-regex-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 180px;
}

.tool-regex-flags {
    flex: 0 0 100px;
    min-width: 80px;
}

.tool-regex-field label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.tool-regex-field input[type="text"] {
    font-family: var(--editor-font-family);
    font-size: 0.88rem;
    height: 2.2rem;
    min-height: 0;
}

/* JSON Diff specific */
.tool-diff-summary {
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    margin-bottom: 0.65rem;
    background: var(--surface);
}

.tool-diff-output {
    margin-bottom: 0.65rem;
}

.tool-diff-output .tool-editor {
    min-height: 180px;
}

/* Responsive */
@media (max-width: 768px) {
    .tool-panel-split {
        grid-template-columns: 1fr;
    }

    .tool-editor {
        min-height: 220px;
    }

    .tool-regex-inputs {
        flex-direction: column;
    }

    .tool-regex-flags {
        flex: 1;
    }
}

.status {
    min-height: 1.5rem;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.status-compact {
    margin-top: 0.1rem;
    min-height: 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #d8fff9;
}

.status-compact.success { color: #eafffb; }
.status-compact.error { color: #ffd2d9; }
.status-compact.error {
    display: none;
}

.status.error { color: var(--danger); }
.status.success { color: #157347; }
.processing-state {
    min-height: 1.4rem;
    margin-top: 0.2rem;
    color: var(--processing-color);
    font-size: 0.92rem;
    font-weight: 600;
}

.command-palette {
    position: fixed;
    inset: 0;
    background: var(--command-bg);
    z-index: 1200;
    display: grid;
    place-items: start center;
    padding-top: 14vh;
}

.command-palette-card {
    width: min(720px, 92vw);
    background: var(--command-card-bg);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    box-shadow: 0 18px 40px rgba(17, 34, 64, 0.25);
    padding: 0.65rem;
}

.command-palette-card input {
    width: 100%;
    margin-bottom: 0.5rem;
}

.command-list {
    display: grid;
    gap: 0.35rem;
    max-height: 320px;
    overflow: auto;
}

.command-item {
    border: 1px solid var(--border);
    background: var(--command-item-bg);
    color: var(--text);
    border-radius: 0.5rem;
    padding: 0.45rem 0.55rem;
    text-align: left;
    cursor: pointer;
}

.command-item:hover {
    background: var(--command-item-hover-bg);
}

.command-hint {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.usage-section, .faq-section, .related-tools {
    margin-top: 1.15rem;
    background: var(--usage-section-bg);
    border: 1px solid var(--usage-section-border);
    border-radius: 0.8rem;
    padding: 0.85rem 0.95rem;
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.related-card {
    display: block;
    background: var(--related-card-bg);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.8rem;
    color: inherit;
}

/* ============================================================
   CONTENT SECTIONS — How to Use, FAQ, Related Tools
   Modern, clean, AdSense-friendly
   ============================================================ */

.content-section {
    margin-top: 1.5rem;
}

.content-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* ---- How to Use ---- */
.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    min-width: 1.4rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    margin-top: 0.1rem;
}

.step-text kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.75rem;
    font-family: var(--editor-font-family);
}

.step-text strong {
    font-weight: 700;
    color: var(--text);
}

/* ---- FAQ ---- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    overflow: hidden;
    transition: border-color 120ms ease;
}

.faq-item[open] {
    border-color: var(--primary);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--surface-alt);
    transition: background 100ms ease;
    gap: 0.5rem;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '';
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 150ms ease;
    flex-shrink: 0;
    margin-top: -0.2rem;
}

.faq-item[open] .faq-question::after {
    transform: rotate(-135deg);
    margin-top: 0.1rem;
}

.faq-item[open] .faq-question {
    background: var(--surface);
    color: var(--primary);
}

.faq-answer {
    padding: 0.65rem 0.8rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.faq-answer p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* ---- Related Tools ---- */
.related-tools {
    margin-top: 1.5rem;
}

.related-tools h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem;
}

.related-card {
    display: block;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, transform 100ms ease;
}

.related-card:hover {
    border-color: var(--primary);
    background: var(--surface);
    transform: translateY(-1px);
    text-decoration: none;
}

.related-card h3 {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.related-card p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.ad-slot { margin: 0.5rem auto; }
.ad-slot-center {
    margin: 0.4rem 0 0.5rem;
}
.ad-placeholder {
    border: 1px dashed var(--ad-placeholder-border);
    border-radius: 0.8rem;
    padding: 0.7rem;
    text-align: center;
    color: var(--ad-placeholder-color);
    background: var(--ad-placeholder-bg);
}
.hidden-ad { display: none; }
.tool-sidebar .hidden-ad { display: none; min-height: 250px; }

/* Keep reserved ad slots in normal flow; prevent floating/hover behavior. */
.ad-slot,
.ad-placeholder {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
}

.ad-popup-slot {
    display: none !important;
}

.ad-popup-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    box-shadow: 0 12px 30px rgba(17, 34, 64, 0.18);
    padding: 0.6rem;
    position: relative;
}

.ad-close {
    position: absolute;
    right: 0.4rem;
    top: 0.25rem;
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-muted);
}

.ad-float-right {
    display: none !important;
}

/* ============================================================
   ALL TOOLS PAGE — 2026 redesign
   Clean list layout, minimal chrome, fast to scan
   ============================================================ */

.at-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1rem 5rem;
}

/* Hero */
.at-hero {
    margin-bottom: 2.5rem;
}

.at-hero h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 0.5rem;
    line-height: 1.1;
    color: var(--text);
}

.at-hero p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

/* Search */
.at-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 380px;
}

.at-search-icon {
    position: absolute;
    left: 0.75rem;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--text-muted);
    pointer-events: none;
    stroke-width: 2;
}

.at-search {
    width: 100%;
    height: 2.4rem;
    padding: 0 3rem 0 2.2rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.at-search:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.at-search::placeholder {
    color: var(--text-muted);
    opacity: 0.55;
}

.at-search-kbd {
    position: absolute;
    right: 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.5;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
    background: var(--surface-alt);
    pointer-events: none;
    font-family: inherit;
}

/* Category pills */
.at-cats {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.at-cat {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
    white-space: nowrap;
}

.at-cat:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.at-cat.is-active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

[data-theme="dark"] .at-cat.is-active {
    background: var(--text);
    color: #0f1219;
}

/* Tool list */
.at-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
}

.at-item {
    border-bottom: 1px solid var(--border);
}

.at-list .at-item:first-child {
    border-top: 1px solid var(--border);
}

.at-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left 100ms ease;
}

.at-link:hover {
    text-decoration: none;
    padding-left: 0.25rem;
}

.at-link:hover .at-name {
    color: var(--primary);
}

.at-link:hover .at-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.at-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 0.45rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--primary);
    flex-shrink: 0;
}

.at-icon .icon-svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
}

.at-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.at-name {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    transition: color 80ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    opacity: 0.3;
    flex-shrink: 0;
    transition: opacity 100ms ease, transform 100ms ease;
}

.at-arrow svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Empty state */
.at-empty {
    padding: 2rem 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
    list-style: none;
}

/* Coming soon */
.at-coming {
    margin-top: 1rem;
}

.at-coming-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    opacity: 0.5;
    margin: 0 0 0.6rem;
}

.at-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.at-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.6;
}

@media (max-width: 600px) {
    .at-page {
        padding: 2rem 1rem 3rem;
    }

    .at-hero h1 {
        font-size: 1.8rem;
    }

    .at-search-wrap {
        max-width: 100%;
    }

    .at-desc {
        display: none;
    }
}

@media (max-width: 600px) {
    .tools-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .tools-search-input {
        width: 100%;
    }

    .tools-search-wrap {
        width: 100%;
    }

    .tools-filter-bar {
        width: 100%;
        border-radius: 0.6rem;
        justify-content: flex-start;
    }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 0;
}

.footer-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    flex-wrap: wrap;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.footer-brand:hover { color: var(--text); text-decoration: none; }

.footer-brand-mark {
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border-radius: 0.3rem;
    background: linear-gradient(140deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    height: 1.6rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 100ms ease, color 100ms ease;
}

.footer-links a:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.footer-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Remove old footer styles */
.site-footer h2 { display: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--text-muted); }

@media (max-width: 600px) {
    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .tool-layout { grid-template-columns: 1fr; }
    .tool-sidebar { order: -1; }
    .tool-sidebar .hidden-ad { min-height: auto; }
}

@media (max-width: 760px) {
    .nav-wrap { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .panel-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--primary);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
    display: none;
    width: 0.95rem;
    height: 0.95rem;
}

/* Show sun icon in dark mode, moon icon in light mode */
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-light { display: block; }
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; }


/* ===== Merged from assets/css/json-v2.css ===== */
/* ============================================================
   JSON Formatter v2 — Visual redesign over the original tools.js
   All functionality comes from tools.js unchanged.
   This CSS only changes the visual presentation.
   ============================================================ */

/* ---- Fonts: Inter (UI) + JetBrains Mono (code) — now global, loaded in header ---- */

/* JetBrains Mono for all editor/code areas on v2 page */
body[data-tool="json-formatter-validator"] .v2-pane textarea,
body[data-tool="json-formatter-validator"] .v2-pane .line-numbers,
body[data-tool="json-formatter-validator"] .v2-pane .editor-statusbar,
body[data-tool="json-formatter-validator"] .v2-pane .editor-searchbar input {
    font-size: 13px;
    font-feature-settings: "liga" 1, "calt" 1;
}

/* ---- Hide ad slot for max editor space ---- */
body[data-tool="json-formatter-validator"] .ad-slot-center {
    display: none;
}

/* Compact tool hero — smaller h1/p while keeping semantic h1 for SEO */
.tool-hero--compact {
    margin-top: 1rem;
    margin-bottom: 0;
}
.tool-hero--compact .tool-hero-title {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}
.tool-hero--compact .tool-hero-intro {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

/* Override tool-main to be transparent container */
body[data-tool="json-formatter-validator"] .tool-main {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

body[data-tool="json-formatter-validator"] .tool-layout {
    margin-top: 0.25rem;
    gap: 0.4rem;
}

/* ---- Floating Action Bar ---- */
.v2-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

[data-theme="dark"] .v2-actionbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.v2-actionbar-left,
.v2-actionbar-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.v2-divider {
    width: 1px;
    height: 1.3rem;
    background: var(--border);
    margin: 0 0.1rem;
    flex-shrink: 0;
}

/* ---- v2 Buttons ---- */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, transform 80ms ease;
    white-space: nowrap;
    line-height: 1;
    background: transparent;
    color: var(--text);
}

.v2-btn .icon-svg {
    width: 0.88rem;
    height: 0.88rem;
}

.v2-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.v2-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.v2-btn-primary:active { transform: translateY(0); }

.v2-btn-ghost {
    color: var(--text-muted);
    border-color: transparent;
    background: transparent;
}

.v2-btn-ghost:hover {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

/* Ensure SVG icons in action bar are visible */
.v2-actionbar .v2-btn .icon-svg {
    stroke: currentColor;
    color: inherit;
}

/* ---- Select ---- */
.v2-select {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.28rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

/* ---- Toggle (Fix checkbox) ---- */
.v2-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    user-select: none;
}

.v2-toggle input[type="checkbox"] {
    width: 0.82rem;
    height: 0.82rem;
    margin: 0;
    accent-color: var(--primary);
}

/* ---- Two-Panel Split ---- */
.v2-split {
    display: grid;
    grid-template-columns: 1fr 6px 1fr;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    height: calc(100vh - 210px);
    min-height: 420px;
    max-height: 860px;
}

[data-theme="dark"] .v2-split {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ---- Pane ---- */
.v2-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    /* Override jsonf-editor-panel defaults */
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* ---- Pane Head (replaces the dark h3 bar) ---- */
.v2-pane-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    min-height: 1.75rem;
    flex-shrink: 0;
}

.v2-pane-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

/* Toolbar inside pane head — override icon-btn for light background */
.v2-pane-toolbar {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-left: auto !important;
    gap: 0.15rem !important;
}

/* Fix icon-btn colors inside v2 pane head (light bg, not dark toolbar) */
.v2-pane-head .icon-btn {
    min-width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: none;
}

.v2-pane-head .icon-btn:hover {
    background: var(--nav-link-hover-bg);
    color: var(--text);
    border-color: var(--border);
    transform: none;
}

.v2-pane-head .icon-btn .icon-svg {
    stroke: currentColor;
}

/* The collapse toggle button needs to update its SVG via JS — ensure it's visible */
#inputToolbarToggleBtn .icon-svg,
#outputToolbarToggleBtn .icon-svg {
    stroke: currentColor;
    pointer-events: none;
}

/* Hide the original h3 panel headers — replaced by v2-pane-head */
.v2-pane h3 {
    display: none !important;
}

/* Editor fills remaining pane height */
.v2-pane .editor-with-lines {
    flex: 1;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: none !important;
    /* Allow gutter and textarea to scroll independently */
    overflow: visible;
}

/* Gutter needs explicit height to be scrollable and clickable */
.v2-pane .editor-with-lines .line-numbers {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.v2-pane .editor-with-lines textarea {
    height: 100% !important;
    min-height: 0 !important;
    background: var(--editor-bg) !important;
    /* Allow horizontal scroll for long single-line JSON */
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
    word-break: normal;
    overflow-wrap: normal;
}

/* Search bar inside pane — modern pill redesign */
.v2-pane .editor-searchbar {
    margin: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
    grid-template-columns: unset !important;
}

/* Search input — pill style */
.v2-pane .editor-searchbar input[type="text"] {
    flex: 1;
    min-width: 0;
    min-height: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 999px 0 0 999px;
    padding: 0 0.65rem;
    font-size: 0.82rem;
    background: var(--surface-alt);
    color: var(--text);
    outline: none;
    transition: border-color 120ms ease, background 120ms ease;
}

.v2-pane .editor-searchbar input[type="text"]:focus {
    border-color: var(--primary);
    background: var(--surface);
}

/* Prev/Next navigation buttons — attached to input */
.v2-pane .editor-searchbar #inputSearchPrevBtn,
.v2-pane .editor-searchbar #inputSearchNextBtn,
.v2-pane .editor-searchbar #outputSearchPrevBtn,
.v2-pane .editor-searchbar #outputSearchNextBtn {
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 0;
    border: 1px solid var(--border);
    border-left: none;
    background: var(--surface-alt);
    color: var(--text-muted);
    box-shadow: none;
}

.v2-pane .editor-searchbar #inputSearchNextBtn,
.v2-pane .editor-searchbar #outputSearchNextBtn {
    border-radius: 0 999px 999px 0;
    border-right: 1px solid var(--border);
    margin-right: 0.4rem;
}

.v2-pane .editor-searchbar #inputSearchPrevBtn:hover,
.v2-pane .editor-searchbar #inputSearchNextBtn:hover,
.v2-pane .editor-searchbar #outputSearchPrevBtn:hover,
.v2-pane .editor-searchbar #outputSearchNextBtn:hover {
    background: var(--nav-link-hover-bg);
    color: var(--text);
    transform: none;
}

/* Search option toggle buttons — pill chips */
.v2-pane .editor-searchbar .search-opt-btn {
    min-width: auto;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--editor-font-family);
    box-shadow: none;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
    margin-right: 0.2rem;
}

.v2-pane .editor-searchbar .search-opt-btn:hover {
    background: var(--nav-link-hover-bg);
    color: var(--text);
    transform: none;
}

.v2-pane .editor-searchbar .search-opt-btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.3);
}

/* Search count */
.v2-pane .editor-searchbar .search-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: auto;
    margin-left: 0.25rem;
    white-space: nowrap;
}

/* Status bar inside pane */
.v2-pane .editor-statusbar {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    flex-shrink: 0;
}

/* ---- Resize Gutter ---- */
.v2-gutter {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    background: var(--surface-alt);
    transition: background 100ms ease;
    user-select: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.v2-gutter:hover {
    background: var(--primary);
}

.v2-gutter-line {
    width: 2px;
    height: 24px;
    border-radius: 1px;
    background: var(--border);
    transition: background 100ms ease;
}

.v2-gutter:hover .v2-gutter-line {
    background: rgba(255, 255, 255, 0.5);
}

/* Tree view button — green accent, stands out on the right */
.v2-btn-tree {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid #16a34a;
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
    white-space: nowrap;
}

.v2-btn-tree .icon-svg {
    width: 0.88rem;
    height: 0.88rem;
    stroke: #16a34a;
}

.v2-btn-tree:hover {
    background: rgba(22, 163, 74, 0.15);
    border-color: #15803d;
    color: #15803d;
}

/* Active state when tree is visible */
.v2-btn-tree.is-active {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

.v2-btn-tree.is-active .icon-svg {
    stroke: #fff;
}

[data-theme="dark"] .v2-btn-tree {
    border-color: #4ade80;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
}

[data-theme="dark"] .v2-btn-tree .icon-svg {
    stroke: #4ade80;
}

[data-theme="dark"] .v2-btn-tree:hover {
    background: rgba(74, 222, 128, 0.15);
    border-color: #86efac;
    color: #86efac;
}

[data-theme="dark"] .v2-btn-tree.is-active {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

[data-theme="dark"] .v2-btn-tree.is-active .icon-svg {
    stroke: #fff;
}

.v2-tree-label {
    font-size: 0.78rem;
}
.v2-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0;
    flex-wrap: wrap;
}

.v2-filter-bar input[type="text"] {
    flex: 1;
    min-width: 180px;
    height: 1.9rem;
    min-height: 1.9rem;
    font-size: 0.82rem;
    border-radius: 999px;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    transition: border-color 120ms ease, background 120ms ease;
}

.v2-filter-bar input[type="text"]:focus {
    border-color: var(--primary);
    background: var(--surface);
    outline: none;
}

.v2-filter-bar input[type="text"]::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.v2-filter-bar .v2-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    border-radius: 999px;
    gap: 0.25rem;
}

.v2-filter-bar .v2-btn:hover {
    background: var(--nav-link-hover-bg);
    color: var(--text);
    border-color: var(--primary);
}

.v2-filter-bar .v2-btn .icon-svg {
    width: 0.75rem;
    height: 0.75rem;
    stroke: currentColor;
}

.v2-match-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0 0.25rem;
}

/* ---- Fix Preview ---- */
.v2-fix-preview {
    margin-top: 0.25rem;
}

/* ---- Tree Section ---- */
.v2-tree-section {
    margin-top: 0.35rem;
}

/* ---- Keyboard Hint ---- */
.v2-kbd-hint {
    text-align: center;
    padding: 0.25rem 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.5;
}

.v2-kbd-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    padding: 0.03rem 0.22rem;
    margin: 0 0.08rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 0.22rem;
    background: var(--surface-alt);
    color: var(--text);
    font: inherit;
    font-size: 0.68rem;
}

/* ---- Mobile tabs override ---- */
.v2-mobile-tabs {
    margin-bottom: 0.35rem;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .v2-split {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .v2-gutter {
        display: none;
    }

    .v2-pane .editor-with-lines {
        min-height: 280px !important;
    }

    .v2-pane .editor-with-lines textarea {
        min-height: 280px !important;
    }

    .v2-actionbar {
        gap: 0.25rem;
    }
}

@media (max-width: 1200px) {
    .v2-split {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .v2-gutter {
        display: none;
    }

    .v2-pane .editor-with-lines {
        min-height: 380px !important;
    }

    .v2-pane .editor-with-lines textarea {
        min-height: 380px !important;
    }
}