/* Minification failed. Returning unminified contents.
(14,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2xl'
(48,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(58,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(61,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(67,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(112,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(119,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(126,25): run-time error CSS1039: Token not allowed after unary operator: '-jt-split'
(178,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(208,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(218,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(236,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(252,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(273,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(322,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(329,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(352,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(379,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(414,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(440,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(442,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(455,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(458,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(463,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(485,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(492,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(494,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(497,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(512,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(514,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(518,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(533,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(586,64): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(599,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(613,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(615,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(615,43): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(624,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(642,26): run-time error CSS1030: Expected identifier, found '.'
(642,34): run-time error CSS1031: Expected selector, found ')'
(642,34): run-time error CSS1025: Expected comma or open brace, found ')'
(651,26): run-time error CSS1030: Expected identifier, found '.'
(651,34): run-time error CSS1031: Expected selector, found ')'
(651,34): run-time error CSS1025: Expected comma or open brace, found ')'
(666,26): run-time error CSS1030: Expected identifier, found '.'
(666,48): run-time error CSS1031: Expected selector, found ')'
(666,48): run-time error CSS1025: Expected comma or open brace, found ')'
(872,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(881,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(884,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(888,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(960,30): run-time error CSS1030: Expected identifier, found '.'
(960,38): run-time error CSS1031: Expected selector, found ')'
(960,38): run-time error CSS1025: Expected comma or open brace, found ')'
(1022,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1024,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1025,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1040,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1050,33): run-time error CSS1039: Token not allowed after unary operator: '-err-color'
(1051,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1060,39): run-time error CSS1039: Token not allowed after unary operator: '-err-color'
(1089,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1099,45): run-time error CSS1039: Token not allowed after unary operator: '-err-color'
(1154,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1161,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1163,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1176,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1191,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1206,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1213,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1231,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1244,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1268,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1300,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1311,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1312,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1339,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1365,50): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1370,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1373,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1377,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1425,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1425,43): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1448,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1481,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1508,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1525,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1532,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1562,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2xl'
(1600,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1600,43): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1619,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1641,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1654,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1656,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1693,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1701,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1775,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1792,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(1810,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1908,30): run-time error CSS1030: Expected identifier, found '.'
(1908,38): run-time error CSS1031: Expected selector, found ')'
(1908,38): run-time error CSS1025: Expected comma or open brace, found ')'
(1914,30): run-time error CSS1030: Expected identifier, found '.'
(1914,38): run-time error CSS1031: Expected selector, found ')'
(1914,38): run-time error CSS1025: Expected comma or open brace, found ')'
(2142,56): run-time error CSS1030: Expected identifier, found '.'
(2142,64): run-time error CSS1031: Expected selector, found ')'
(2142,64): run-time error CSS1025: Expected comma or open brace, found ')'
(2507,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2508,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2509,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2524,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(2536,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2741,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2755,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2757,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2804,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2865,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(2873,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2879,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2886,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(2892,23): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
 */
/* ── JSON Tools ─────────────────────────────────────────────────────────────
   Cohesive dark "code-editor" aesthetic that stays consistent in both
   light and dark site themes. Wrapped in an ambient-glow shell so it
   never feels like a flat slab pasted into the page.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tool Shell ─────────────────────────────────────────────────────────── */
.jt-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-2xl, 20px);
    background: linear-gradient(180deg, #0B1220 0%, #0F172A 100%);
    border: 1px solid rgba(59, 130, 246, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 60px -28px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    isolation: isolate;
}

/* Ambient gradient glow — design-system "Minimal Surface, Maximum Depth" */
.jt-tool::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 18% 0%, rgba(59, 130, 246, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 85% 100%, rgba(139, 92, 246, 0.16) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

/* ── Action Bar ────────────────────────────────────────────────────────── */
.jt-action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.jt-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.85));
    color: #CBD5E1;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font-body);
    line-height: 1;
}

.jt-action-btn i { font-size: 0.85em; opacity: 0.9; }

.jt-action-btn:hover {
    color: #F8FAFC;
    border-color: rgba(96, 165, 250, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.55);
}

.jt-action-btn.active {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 22px -8px rgba(59, 130, 246, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.jt-action-btn.active:hover { transform: translateY(-1px); }

.jt-action-btn.jt-fix-btn {
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
}

.jt-action-btn.jt-fix-btn:hover {
    color: #FDE68A;
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 6px 18px -8px rgba(245, 158, 11, 0.55);
}

.jt-action-sep {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.25), transparent);
    flex-shrink: 0;
}

.jt-action-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Editor Area ────────────────────────────────────────────────────────── */
/* Flex layout (not grid) so the divider can drive the split via flex-basis.
   --jt-split is updated by the JS resizer drag handler. Default 50/50. */
.jt-editor-area {
    --jt-split: 50%;
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}
.jt-input-col {
    flex: 0 0 calc(var(--jt-split) - 7px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.jt-output-pane {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 7px;
}
.jt-input-col > .jt-editor-pane { flex: 1; min-height: 0; }
.jt-input-col.is-diff > .jt-editor-pane { height: auto; flex: 1 1 50%; }
.jt-input-col.is-diff > .jt-diff-pane { display: flex !important; }

/* ── Resizer (between panes) ─────────────────────────────────────────────── */
.jt-resizer {
    position: relative;
    flex: 0 0 14px;
    align-self: stretch;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    z-index: 5;
    outline: none;
}
.jt-resizer-grip {
    width: 4px;
    height: 48px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.25);
    transition: background 0.2s ease, height 0.2s ease, width 0.2s ease;
}
.jt-resizer:hover .jt-resizer-grip,
.jt-resizer.is-dragging .jt-resizer-grip,
.jt-resizer:focus-visible .jt-resizer-grip {
    background: linear-gradient(180deg, #3B82F6, #8B5CF6);
    height: 64px;
    width: 5px;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
}
.jt-resizer.is-dragging { cursor: col-resize; }
body.jt-resizing,
body.jt-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ── Shared Pane Shell ──────────────────────────────────────────────────── */
.jt-editor-pane,
.jt-output-pane {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0B1220;
    border: 1px solid rgba(148, 163, 184, 0.12);
    height: 480px;
    min-height: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 18px 40px -24px rgba(0, 0, 0, 0.6);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jt-editor-pane:focus-within,
.jt-output-pane:focus-within {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 0 0 1px rgba(59, 130, 246, 0.18),
        0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

.jt-pane-header,
.jt-tab-bar,
.jt-output-toolbar {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    flex-shrink: 0;
    gap: var(--space-2);
}

.jt-pane-header { justify-content: space-between; }
.jt-output-toolbar { border-bottom: none; border-top: 1px solid #334155; }

.jt-pane-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: #93C5FD;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.jt-pane-title::before {
    content: '';
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 2px;
}

.jt-pane-meta {
    display: flex;
    gap: 12px;
    font-size: var(--text-xs);
    color: #64748B;
    font-variant-numeric: tabular-nums;
}

/* ── Input Editor ───────────────────────────────────────────────────────── */
.jt-input-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.jt-line-nums {
    padding: 14px 10px 14px 14px;
    color: #334155;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    text-align: right;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    min-width: 42px;
    white-space: pre;
    flex-shrink: 0;
    background: #0B1220;
    border-right: 1px solid rgba(148, 163, 184, 0.06);
}

.jt-input {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: none;
    outline: none;
    color: #E2E8F0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    resize: none;
    overflow: auto;
    white-space: pre;
    tab-size: 4;
    caret-color: #93C5FD;
    /* Unified scrollbar — matches .jt-panel */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.18) transparent;
}
.jt-input::-webkit-scrollbar { width: 10px; height: 10px; }
.jt-input::-webkit-scrollbar-track { background: transparent; }
.jt-input::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.jt-input::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.32);
    background-clip: padding-box;
}
.jt-input::-webkit-scrollbar-corner { background: transparent; }

html:not([data-theme="dark"]) .jt-input {
    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}
html:not([data-theme="dark"]) .jt-input::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    background-clip: padding-box;
}
html:not([data-theme="dark"]) .jt-input::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
    background-clip: padding-box;
}

.jt-input::placeholder { color: #334155; }

/* ── Tab Bar ────────────────────────────────────────────────────────────── */
.jt-tab-bar { padding: 0 14px; gap: 4px; }

.jt-tab-btn {
    position: relative;
    padding: 11px 14px;
    border: none;
    background: transparent;
    color: #64748B;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.18s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-body);
}

.jt-tab-btn::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.jt-tab-btn:hover { color: #CBD5E1; }
.jt-tab-btn.active { color: #93C5FD; }
.jt-tab-btn.active::after { transform: scaleX(1); }

.jt-tab-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Output / Tree / Stats Panels ───────────────────────────────────────── */
.jt-panel {
    display: block;
    flex: 1;
    overflow: auto;
    padding: 14px 16px;
    position: relative;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.04), transparent 70%),
        #0B1220;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.18) transparent;
}

.jt-panel::-webkit-scrollbar { width: 10px; height: 10px; }
.jt-panel::-webkit-scrollbar-track { background: transparent; }
.jt-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    border: 2px solid #0B1220;
}
.jt-panel::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.3); }

.jt-output-code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.65;
    white-space: pre;
    color: #E2E8F0;
    display: block;
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Syntax Highlight Colors ────────────────────────────────────────────── */
.jt-key    { color: #93C5FD; }
.jt-string { color: #86EFAC; }
.jt-number { color: #FDE68A; }
.jt-bool   { color: #FB923C; }
.jt-null   { color: #F87171; }

/* ── Search Highlight ───────────────────────────────────────────────────── */
.jt-search-mark {
    background: #FDE68A;
    color: #0F172A;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Badge ──────────────────────────────────────────────────────────────── */
.jt-badge {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.jt-badge-valid {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.jt-badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── Error Message ──────────────────────────────────────────────────────── */
.jt-error-msg {
    display: none;
    margin-bottom: 8px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    color: #FCA5A5;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

/* ── Output Toolbar ─────────────────────────────────────────────────────── */
.jt-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.6);
    color: #94A3B8;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    font-family: var(--font-body);
}

.jt-toolbar-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    color: #F8FAFC;
    border-color: rgba(96, 165, 250, 0.4);
    transform: translateY(-1px);
}

.jt-toolbar-btn.jt-success {
    color: #4ADE80;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(34, 197, 94, 0.12);
}

.jt-search-box {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4B5563;
    font-size: var(--text-xs);
}

.jt-search-input {
    padding: 6px 10px;
    background: rgba(11, 18, 32, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    color: #E2E8F0;
    font-size: var(--text-xs);
    width: 160px;
    outline: none;
    font-family: var(--font-body);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.jt-search-input:focus {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.jt-search-input::placeholder { color: #475569; }

/* ── Indent Selector ────────────────────────────────────────────────────── */
.jt-indent-sel {
    padding: 6px 8px;
    background: rgba(11, 18, 32, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    color: #CBD5E1;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
    transition: border-color 0.18s ease;
}

.jt-indent-sel:hover { border-color: rgba(96, 165, 250, 0.45); }

.jt-toolbar-sep {
    width: 1px;
    height: 16px;
    background: #334155;
    flex-shrink: 0;
}

/* ── Tree View ──────────────────────────────────────────────────────────── */
.jt-tree-view {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #E2E8F0;
}

.jt-tree-node {
    position: relative;
    padding-left: 16px;
}

.jt-root-node { padding-left: 0; }

.jt-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    cursor: pointer;
    color: #475569;
    margin-right: 3px;
    vertical-align: middle;
}

.jt-tree-toggle:hover { color: #93C5FD; }

.jt-chevron {
    font-size: 0.5625rem;
    transition: transform 0.15s ease;
}

.jt-tree-key  { color: #93C5FD; }
.jt-bracket   { color: #94A3B8; }
.jt-close-bracket { display: block; padding-left: 0; }

.jt-count {
    display: none; /* shown only when node is collapsed via JS toggle */
    color: #475569;
    font-size: 0.75rem;
    font-style: italic;
}

.jt-tree-children {
    border-left: 1px solid #1E293B;
    margin-left: 6px;
    padding-left: 12px;
}

.jt-tree-leaf {
    padding-left: 17px;
    line-height: 1.7;
}

.jt-tree-error { color: #64748B; padding: 4px; font-size: var(--text-sm); }

/* ── Stats Grid ─────────────────────────────────────────────────────────── */
.jt-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.jt-stat-card {
    position: relative;
    background: linear-gradient(160deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.jt-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 12px 28px -16px rgba(59, 130, 246, 0.5);
}

.jt-stat-val {
    font-size: var(--text-xl);
    font-weight: 800;
    font-family: var(--font-heading, var(--font-mono));
    line-height: 1.2;
    background: linear-gradient(135deg, #60A5FA, #A78BFA, #F472B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jt-stat-lbl {
    font-size: var(--text-xs);
    color: #64748B;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 — Developer Love Edition
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   v2.1 — Full-bleed canvas + restored labels
   Break out of the centered tool-card so devs get the full viewport,
   matching jsonformatter.org / jsoncrack / jsonhero canvas size.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make the parent card span the full viewport when JSON tool is inside */
.tool-interface-card:has(.jt-tool) {
    position: relative;
    width: min(1640px, 96vw);
    margin-left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    box-shadow: none;
}
.tool-interface-card:has(.jt-tool) > .tool-interface-body {
    padding: 0;
}

/* Tool shell — tighter padding, taller default */
.jt-tool {
    padding: 14px;
    gap: 12px;
}

/* ── Fullscreen mode ────────────────────────────────────────────────────── */
/* CRITICAL: the parent card has `transform: translateX(-50%)` (our breakout
   trick), which creates a new containing block for fixed-positioned children.
   We must reset that transform when going fullscreen, otherwise `inset: 0`
   positions relative to the transformed parent and the tool disappears. */
.tool-interface-card:has(.jt-tool.jt-fullscreen) {
    transform: none !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.jt-tool.jt-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 0;
    border: none;
    padding: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: jt-fs-in 0.28s cubic-bezier(.16,1,.3,1);
}
/* In fullscreen the editor area takes all remaining vertical space */
.jt-tool.jt-fullscreen .jt-action-bar { flex-shrink: 0; }
.jt-tool.jt-fullscreen .jt-editor-area { flex: 1 1 auto; min-height: 0; }
@keyframes jt-fs-in {
    from { opacity: 0.6; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}
/* When the tool goes fullscreen, lock body + html scroll (some browsers
   put the visible scrollbar on <html>, so locking only body leaves a stub) */
html.jt-fs-lock,
body.jt-fs-lock { overflow: hidden !important; }

/* In fullscreen, panes flex-fill the editor area — no fixed height, no overflow */
.jt-tool.jt-fullscreen .jt-editor-pane,
.jt-tool.jt-fullscreen .jt-output-pane {
    height: auto;
    max-height: none;
}
.jt-tool.jt-fullscreen .jt-input-col { height: 100%; }

/* Active button state — show as "exit fullscreen" */
.jt-fs-btn.is-active i::before { content: "\f066"; } /* fa-compress */

/* ── Brand Watermark (fullscreen only) ──────────────────────────────────── */
/* Hidden by default — only appears when the tool goes fullscreen, so users
   stay anchored to the EasifyMe brand even when the page chrome is gone.
   Bottom-left corner so it stays clear of the toolbar and search box. */
.jt-brand-watermark {
    display: none;
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 6px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    pointer-events: auto;
    cursor: default;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 6px 16px -8px rgba(15, 23, 42, 0.22),
        0 3px 10px -4px rgba(139, 92, 246, 0.25);
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.35s ease 0.15s,
        transform 0.4s cubic-bezier(.16,1,.3,1) 0.15s,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        width 0.35s ease,
        height 0.35s ease;
}

.jt-brand-favicon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
/* Reveal the watermark when its parent tool enters fullscreen */
.jt-tool.jt-fullscreen .jt-brand-watermark {
    display: inline-flex;
    opacity: 1;
    transform: scale(1);
}

/* Hover lives on the resizer (which is wider) so it triggers reliably */
.jt-brand-watermark:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(139, 92, 246, 0.55);
    transform: scale(1.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 12px 28px -12px rgba(139, 92, 246, 0.45),
        0 6px 16px -6px rgba(59, 130, 246, 0.35);
}
.jt-brand-watermark:hover .jt-brand-favicon {
    transform: scale(1.08) rotate(-6deg);
}
.jt-brand-watermark:hover .jt-brand-glow {
    opacity: 1;
    transform: translateX(220%);
}

/* Animated rainbow glow that sweeps across the pill on hover (shimmer) */
.jt-brand-glow {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(59, 130, 246, 0.18) 40%,
        rgba(139, 92, 246, 0.28) 50%,
        rgba(236, 72, 153, 0.18) 60%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.9s cubic-bezier(.4,0,.2,1);
    z-index: -1;
    filter: blur(2px);
}

/* Subtle ambient pulse on the pill border itself when idle */
@keyframes jt-brand-pulse {
    0%, 100% {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 10px 28px -14px rgba(15, 23, 42, 0.28),
            0 4px 14px -6px rgba(139, 92, 246, 0.25),
            0 0 0 0 rgba(139, 92, 246, 0);
    }
    50% {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 10px 28px -14px rgba(15, 23, 42, 0.28),
            0 4px 14px -6px rgba(139, 92, 246, 0.35),
            0 0 0 6px rgba(139, 92, 246, 0.08);
    }
}
.jt-tool.jt-fullscreen .jt-brand-watermark {
    animation: jt-brand-pulse 4.5s ease-in-out infinite;
}
.jt-tool.jt-fullscreen .jt-brand-watermark:hover { animation: none; }


/* Dark-mode override */
[data-theme="dark"] .jt-brand-watermark {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(96, 165, 250, 0.25);
    color: #F8FAFC;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 24px -12px rgba(0, 0, 0, 0.6),
        0 4px 12px -6px rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .jt-resizer:hover .jt-brand-watermark {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(96, 165, 250, 0.45);
}
/* Invert the favicon in dark mode so it shows as a light icon on the dark glass */
[data-theme="dark"] .jt-brand-favicon {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
}
@media (max-width: 720px) {
    .jt-brand-watermark { width: 32px; height: 32px; padding: 4px; margin-right: 4px; }
}

/* Make the editor panes use viewport height */
.jt-editor-pane,
.jt-output-pane {
    height: clamp(520px, 72vh, 920px);
}

/* ── Action Bar v2.1 — labels back, hierarchy via group + colors ────────── */
.jt-action-bar {
    gap: 6px;
    padding: 8px 10px;
    flex-wrap: wrap;
}

/* Primary mode selector — segmented pill */
.jt-mode-group {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: rgba(11, 18, 32, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.jt-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: #94A3B8;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
    font-family: var(--font-body);
    line-height: 1;
    white-space: nowrap;
}
.jt-mode-btn i { font-size: 0.85em; opacity: 0.85; }
.jt-mode-btn:hover { color: #F8FAFC; }
.jt-mode-btn.active {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(59, 130, 246, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* Auto-Fix accent button */
.jt-action-btn.jt-fix-btn { padding: 8px 14px; }

/* Hide mode-incompatible buttons (e.g. Diff hides Auto-Fix, X-Ray, Export) */
.jt-tool.is-diff-mode [data-mode-hide="diff"] { display: none !important; }

/* X-Ray button active state */
.jt-action-btn.jt-xray-btn.active {
    background: linear-gradient(135deg, #06B6D4, #8B5CF6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* Export button — primary CTA, always visible */
.jt-action-btn.jt-export-btn {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow:
        0 8px 22px -8px rgba(59, 130, 246, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    position: relative;
}
.jt-action-btn.jt-export-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.25s ease;
}
.jt-action-btn.jt-export-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px -8px rgba(59, 130, 246, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    background: linear-gradient(135deg, #4F8FF7, #7C7FF7);
}
.jt-action-btn.jt-export-btn:hover::before { opacity: 1; }
.jt-action-btn.jt-export-btn i {
    background: linear-gradient(135deg, #DBEAFE, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jt-action-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1100px) {
    .tool-interface-card:has(.jt-tool) {
        width: 98vw;
    }
}
/* Height tweaks at tablet width — the full mobile layout kicks in at 900px
   (see the "Responsive" block further down). */
@media (max-width: 720px) {
    .jt-mode-btn { font-size: 0.78rem; padding: 6px 10px; }
    .jt-action-btn { font-size: 0.78rem; padding: 7px 10px; }
}

/* ── Error Marker (legacy single-line, kept for fallback) ───────────────── */
.jt-input-wrapper { position: relative; }
.jt-error-marker {
    position: absolute;
    left: 42px; right: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04));
    border-left: 2px solid #EF4444;
    height: 1.6em;
    display: none;
    z-index: 1;
    transition: top 0.15s ease;
}
.jt-error-marker.active { display: block; }

/* ── Multi-line Error Markers ───────────────────────────────────────────── */
/* Single layer that holds all markers — moved with one transform on scroll
   so the GPU composites it in the same frame as the textarea content. */
.jt-err-marker-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.jt-err-line-marker {
    position: absolute;
    left: 42px;
    right: 0;
    pointer-events: none;
    border-left: 3px solid #EF4444;
}
.jt-err-line-marker.jt-err-flash {
    animation: jt-err-flash 0.8s ease;
}
@keyframes jt-err-flash {
    0%, 100% { filter: brightness(1); }
    30%      { filter: brightness(1.7) saturate(1.4); }
}

/* ── Multi-Error List in Output Panel ───────────────────────────────────── */
.jt-err-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-lg);
    color: #FCA5A5;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.jt-err-summary i { color: #F87171; font-size: 1rem; }
.jt-err-summary strong { color: #F8FAFC; font-weight: 700; }
.jt-err-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: #94A3B8;
    font-weight: 500;
}

.jt-err-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
}
.jt-err-row {
    display: grid;
    grid-template-columns: 24px auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-left: 3px solid var(--err-color, #EF4444);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 0.78rem;
}
.jt-err-row:hover {
    background: rgba(15, 23, 42, 0.85);
    transform: translateX(2px);
    border-left-width: 4px;
    box-shadow: 0 6px 18px -10px var(--err-color);
}
.jt-err-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.15);
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.jt-err-tag {
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid;
    white-space: nowrap;
    text-transform: uppercase;
}
.jt-err-msg {
    color: #CBD5E1;
    word-break: break-word;
    line-height: 1.5;
    font-family: var(--font-mono);
    font-size: 0.74rem;
}
.jt-err-loc {
    color: #64748B;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.jt-err-row:hover .jt-err-loc { color: var(--err-color); }

/* ── Light mode overrides ───────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-err-summary {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}
html:not([data-theme="dark"]) .jt-err-summary strong { color: #7F1D1D; }
html:not([data-theme="dark"]) .jt-err-summary i { color: #DC2626; }
html:not([data-theme="dark"]) .jt-err-hint { color: #94A3B8; }

html:not([data-theme="dark"]) .jt-err-row {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html:not([data-theme="dark"]) .jt-err-row:hover {
    background: #FAFBFC;
}
html:not([data-theme="dark"]) .jt-err-num {
    background: rgba(15, 23, 42, 0.06);
    color: #64748B;
}
html:not([data-theme="dark"]) .jt-err-msg { color: #1E293B; }
html:not([data-theme="dark"]) .jt-err-loc { color: #94A3B8; }

.jt-error-msg {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.jt-error-msg:hover { background: rgba(239, 68, 68, 0.18); }
.jt-error-msg .jt-err-jump {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(239, 68, 68, 0.25);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #FECACA;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── JSONPath Bar ───────────────────────────────────────────────────────── */
.jt-jpath-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(11, 18, 32, 0.85);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #64748B;
    font-size: var(--text-xs);
}
.jt-jpath-input {
    flex: 1;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    color: #E2E8F0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.jt-jpath-input:focus {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.jt-jpath-input::placeholder { color: #475569; }
.jt-jpath-input.jt-jpath-error { border-color: rgba(239, 68, 68, 0.6); }

.jt-jpath-result {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #94A3B8;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}
.jt-jpath-sep {
    width: 1px; height: 18px;
    background: rgba(148, 163, 184, 0.2);
    margin: 0 4px;
}
.jt-mini-btn {
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.6);
    color: #94A3B8;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.18s ease;
}
.jt-mini-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #F8FAFC;
    border-color: rgba(96, 165, 250, 0.45);
}
.jt-mini-select {
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.6);
    color: #CBD5E1;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
}

/* ── Tree Node — Copy Path & Hover ──────────────────────────────────────── */
.jt-tree-node, .jt-tree-leaf { position: relative; }
.jt-tree-node:hover > .jt-node-actions,
.jt-tree-leaf:hover > .jt-node-actions { opacity: 1; }
.jt-node-actions {
    position: absolute;
    right: 6px;
    top: 1px;
    display: inline-flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-sm);
    padding: 2px;
    z-index: 2;
}
.jt-node-action {
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-body);
}
.jt-node-action:hover { background: rgba(59, 130, 246, 0.2); color: #F8FAFC; }
.jt-node-action.copied { color: #4ADE80; }

/* Always show node counts (no longer JS-toggled) */
.jt-count {
    display: inline !important;
    color: #475569;
    font-size: 0.72rem;
    font-style: italic;
    margin-left: 4px;
}

/* ── X-Ray Annotations (inline value previews) ──────────────────────────── */
.jt-xray-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    cursor: help;
    border: 1px solid transparent;
    transition: transform 0.15s ease;
}
.jt-xray-tag:hover { transform: translateY(-1px); }
.jt-xray-jwt    { background: rgba(139, 92, 246, 0.15); color: #C4B5FD; border-color: rgba(139, 92, 246, 0.3); }
.jt-xray-b64    { background: rgba(6, 182, 212, 0.15);  color: #67E8F9; border-color: rgba(6, 182, 212, 0.3); }
.jt-xray-date   { background: rgba(245, 158, 11, 0.12); color: #FCD34D; border-color: rgba(245, 158, 11, 0.3); }
.jt-xray-ts     { background: rgba(245, 158, 11, 0.12); color: #FCD34D; border-color: rgba(245, 158, 11, 0.3); }
.jt-xray-url    { background: rgba(59, 130, 246, 0.15); color: #93C5FD; border-color: rgba(59, 130, 246, 0.3); }
.jt-xray-uuid   { background: rgba(168, 85, 247, 0.12); color: #D8B4FE; border-color: rgba(168, 85, 247, 0.3); }
.jt-xray-email  { background: rgba(16, 185, 129, 0.12); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.3); }
.jt-xray-color  { background: rgba(236, 72, 153, 0.12); color: #F9A8D4; border-color: rgba(236, 72, 153, 0.3); }
.jt-xray-image  { background: rgba(34, 197, 94, 0.12);  color: #86EFAC; border-color: rgba(34, 197, 94, 0.3); }

.jt-xray-swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    vertical-align: middle;
}
.jt-xray-thumb {
    display: block;
    margin: 4px 0 4px 22px;
    max-width: 140px;
    max-height: 80px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}
.jt-xray-decoded {
    display: block;
    margin: 4px 0 6px 22px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-left: 3px solid #8B5CF6;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    color: #CBD5E1;
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 540px;
}
.jt-xray-link {
    color: #93C5FD;
    text-decoration: none;
    border-bottom: 1px dashed rgba(147, 197, 253, 0.4);
}
.jt-xray-link:hover { color: #DBEAFE; border-bottom-color: #DBEAFE; }

/* ── Smart Paste Toast ──────────────────────────────────────────────────── */
.jt-smart-paste {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #1E293B, #0F172A);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: var(--radius-xl, 16px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 24px 60px -16px rgba(59, 130, 246, 0.5),
        0 12px 32px -8px rgba(0, 0, 0, 0.6);
    color: #F1F5F9;
    z-index: 9999;
    max-width: 560px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.jt-smart-paste.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.jt-sp-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px -4px rgba(59, 130, 246, 0.6);
}
.jt-sp-body { flex: 1; min-width: 0; }
.jt-sp-title { font-weight: 700; font-size: var(--text-sm); color: #F8FAFC; }
.jt-sp-desc { font-size: 0.75rem; color: #94A3B8; margin-top: 2px; }
.jt-sp-btn {
    padding: 8px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.7);
    color: #CBD5E1;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font-body);
    white-space: nowrap;
}
.jt-sp-btn:hover { color: #fff; border-color: rgba(96, 165, 250, 0.5); }
.jt-sp-btn.jt-sp-primary {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.6);
}

/* ── Time Travel Drawer ─────────────────────────────────────────────────── */
.jt-drawer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
}
.jt-drawer.show { display: block; }
.jt-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: jt-fade-in 0.2s ease;
}
.jt-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 100vw);
    background: linear-gradient(180deg, #0B1220, #0F172A);
    border-left: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow: -24px 0 60px -16px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    animation: jt-slide-in 0.28s cubic-bezier(.16,1,.3,1);
}
@keyframes jt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jt-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.jt-drawer-header {
    position: relative;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.jt-drawer-title {
    margin: 0;
    font-family: var(--font-heading, var(--font-body));
    font-size: 1.15rem;
    font-weight: 800;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}
.jt-drawer-title i {
    background: linear-gradient(135deg, #60A5FA, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jt-drawer-sub { margin: 6px 0 0; font-size: 0.78rem; color: #64748B; }
.jt-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.6);
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.18s ease;
}
.jt-drawer-close:hover { color: #F8FAFC; border-color: rgba(96, 165, 250, 0.5); }

.jt-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.jt-drawer-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.jt-drawer-hint { font-size: 0.7rem; color: #475569; }

.jt-tt-list { display: flex; flex-direction: column; gap: 8px; }
.jt-tt-empty {
    padding: 40px 20px;
    text-align: center;
    color: #475569;
    font-size: 0.85rem;
}
.jt-tt-empty i { font-size: 2rem; margin-bottom: 12px; display: block; opacity: 0.4; }

.jt-tt-item {
    position: relative;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.18s ease;
    overflow: hidden;
}
.jt-tt-item:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 8px 22px -10px rgba(59, 130, 246, 0.35);
}
.jt-tt-item.current {
    border-color: rgba(96, 165, 250, 0.55);
    background: linear-gradient(160deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.06));
}
.jt-tt-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.72rem;
    color: #94A3B8;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.jt-tt-time { font-weight: 700; color: #CBD5E1; }
.jt-tt-size { color: #64748B; }
.jt-tt-preview {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
.jt-tt-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.jt-tt-action {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius-sm);
    background: rgba(11, 18, 32, 0.7);
    color: #94A3B8;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font-body);
}
.jt-tt-action:hover { color: #F8FAFC; border-color: rgba(96, 165, 250, 0.45); background: rgba(59, 130, 246, 0.1); }
.jt-tt-action.danger:hover { color: #FCA5A5; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }

/* ── Type Generator Modal ───────────────────────────────────────────────── */
.jt-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.jt-modal.show { display: flex; }
.jt-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: jt-fade-in 0.2s ease;
}
.jt-modal-panel {
    position: relative;
    width: min(1100px, 100%);
    max-height: 90vh;
    background: linear-gradient(180deg, #0B1220, #0F172A);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: var(--radius-2xl, 20px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 40px 80px -20px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: jt-modal-in 0.28s cubic-bezier(.16,1,.3,1);
}
@keyframes jt-modal-in { from { transform: translateY(20px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.jt-modal-header {
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), transparent);
}
.jt-modal-titlewrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 40px;
}
.jt-modal-iconcircle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.6);
}
.jt-modal-title {
    margin: 0;
    font-family: var(--font-heading, var(--font-body));
    font-size: 1.15rem;
    font-weight: 800;
    color: #F8FAFC;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.jt-modal-subtitle {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: #94A3B8;
}
.jt-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.6);
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.18s ease;
}
.jt-modal-close:hover { color: #F8FAFC; border-color: rgba(96, 165, 250, 0.5); }

/* ── Export modal — filter pills + flowing tab grid ─────────────────────── */
.jt-mt-section-block {
    padding: 12px 24px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(15, 23, 42, 0.4);
}
.jt-mt-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    margin-bottom: 10px;
    background: rgba(11, 18, 32, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-lg);
}
.jt-mt-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.18s ease;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.jt-mt-filter-btn:hover { color: #F8FAFC; }
.jt-mt-filter-btn.active {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(59, 130, 246, 0.5);
}
.jt-mt-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    font-size: 0.62rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: inherit;
}
.jt-mt-filter-btn:not(.active) .jt-mt-filter-count { background: rgba(148, 163, 184, 0.18); }

.jt-mt-tabs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 5px;
}
.jt-mt-tab.is-hidden { display: none; }
.jt-mt-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.55);
    color: #CBD5E1;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    font-family: var(--font-body);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jt-mt-tab i { font-size: 0.85em; opacity: 0.85; }
.jt-mt-tab:hover {
    color: #F8FAFC;
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
}
.jt-mt-tab.active {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(59, 130, 246, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.jt-mt-tab.active i { opacity: 1; }
/* Hide the old separator that's no longer needed */
.jt-mt-tab-sep { display: none; }

.jt-modal-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.06), transparent 70%),
        #0B1220;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) rgba(11, 18, 32, 0.4);
}
.jt-modal-body::-webkit-scrollbar { width: 12px; height: 12px; }
.jt-modal-body::-webkit-scrollbar-track {
    background: rgba(11, 18, 32, 0.4);
    border-left: 1px solid rgba(148, 163, 184, 0.08);
}
.jt-modal-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    border: 2px solid rgba(11, 18, 32, 0.4);
    background-clip: padding-box;
}
.jt-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); background-clip: padding-box; }

html:not([data-theme="dark"]) .jt-modal-body {
    scrollbar-color: rgba(15, 23, 42, 0.3) rgba(241, 245, 249, 0.6);
}
html:not([data-theme="dark"]) .jt-modal-body::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6);
    border-left-color: rgba(15, 23, 42, 0.06);
}
html:not([data-theme="dark"]) .jt-modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.3);
    border-color: rgba(241, 245, 249, 0.6);
    background-clip: padding-box;
}
html:not([data-theme="dark"]) .jt-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.5);
    background-clip: padding-box;
}
.jt-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.jt-modal-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    border: 2px solid #0B1220;
}
.jt-output-wrap {
    display: flex;
    align-items: stretch;
}
.jt-export-line-nums {
    flex-shrink: 0;
    padding: 18px 12px 26px 18px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    color: #475569;
    text-align: right;
    user-select: none;
    pointer-events: none;
    background: rgba(11, 18, 32, 0.6);
    border-right: 1px solid rgba(148, 163, 184, 0.08);
    white-space: pre;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}
.jt-types-output {
    flex: 1;
    margin: 0;
    padding: 18px 26px 26px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    color: #E2E8F0;
    white-space: pre;
    overflow-x: auto;
    min-width: 0;
}
.jt-types-output .jt-comment { color: #64748B; font-style: italic; }

/* ── Export modal — language label + metadata bar ───────────────────────── */
.jt-export-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 26px;
    background: rgba(15, 23, 42, 0.55);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-family: var(--font-body);
}
.jt-export-lang-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #93C5FD;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.jt-export-lang-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
}
.jt-export-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.7rem;
    color: #64748B;
    font-variant-numeric: tabular-nums;
}
.jt-export-meta span { display: inline-flex; align-items: center; gap: 5px; }
.jt-export-meta i { font-size: 0.7em; opacity: 0.75; }
.jt-modal-footer {
    padding: 12px 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(15, 23, 42, 0.6);
    flex-shrink: 0; /* never get squeezed off-screen */
}
.jt-modal-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    color: #64748B;
    flex: 1;
}
.jt-modal-hint i {
    background: linear-gradient(135deg, #60A5FA, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jt-modal-actions { display: inline-flex; gap: 8px; }
.jt-toolbar-btn-primary {
    background: linear-gradient(135deg, #3B82F6, #6366F1) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(59, 130, 246, 0.6);
}
.jt-toolbar-btn-primary:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(59, 130, 246, 0.7);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet — stack input above output, drop the column resizer. */
@media (max-width: 900px) {
    .jt-editor-area {
        flex-direction: column;
        gap: 12px;
    }
    .jt-input-col {
        flex: 0 0 auto;
        width: 100%;
        height: clamp(360px, 52vh, 560px);
    }
    .jt-output-pane {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
        height: auto;
        min-height: clamp(360px, 52vh, 560px);
    }
    /* Column resizer only makes sense in a side-by-side layout */
    .jt-resizer { display: none; }
}

/* Phone — tighten everything and make toolbars horizontally scrollable. */
@media (max-width: 640px) {
    /* Card breakout: use full width on phones.
       overflow:visible is critical — the base .tool-interface-card has
       overflow:hidden (for desktop rounded-corner clipping), which would
       clip the tall output pane we grow on mobile. Also unset height caps
       on the body so it doesn't constrain the pane. */
    .tool-interface-card:has(.jt-tool) {
        width: 100vw;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    .tool-interface-card:has(.jt-tool) > .tool-interface-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    .jt-tool {
        padding: 10px;
        gap: 10px;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    .jt-tool .jt-editor-area {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Brand watermark: force-hide on phones regardless of fullscreen state */
    .jt-brand-watermark,
    .jt-tool.jt-fullscreen .jt-brand-watermark { display: none !important; }

    /* Fullscreen button is redundant on phones (browser tab is already fullscreen).
       Hiding it reclaims a touch target and simplifies the action bar. */
    #jt-btn-fullscreen { display: none !important; }

    /* Action bar: mode pill row 1 (full width), action buttons row 2 (horizontal scroll) */
    .jt-action-bar {
        gap: 8px;
        padding: 8px 10px;
        flex-wrap: wrap;
        row-gap: 8px;
        align-items: stretch;
    }
    .jt-mode-group {
        width: 100%;
        justify-content: stretch;
        order: 1;
    }
    .jt-mode-group .jt-mode-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 6px;
    }

    /* All non-mode action buttons live on a single horizontally-scrollable strip.
       We use a flex trick: force them all onto one line via flex-basis:auto and
       let the whole action bar scroll horizontally after the mode group wraps. */
    .jt-action-btn {
        order: 2;
        flex: 0 0 auto;
        font-size: 0.78rem;
        padding: 7px 11px;
        white-space: nowrap;
    }
    .jt-action-btn i { font-size: 0.9em; }
    .jt-mode-btn { font-size: 0.8rem; white-space: nowrap; }

    /* The right-side utility group drops its auto margin and becomes inline */
    .jt-action-right {
        order: 3;
        margin-left: 0;
        gap: 6px;
        display: contents; /* flatten so children participate in parent flex row */
    }

    /* Pane header — smaller, single line */
    .jt-pane-header { padding: 7px 10px; }
    .jt-pane-meta { gap: 8px; font-size: 0.72rem; }
    .jt-pane-title { font-size: 0.68rem; letter-spacing: 0.08em; }

    /* Tab bar — horizontally scrollable, no overlap */
    .jt-tab-bar {
        padding: 0 8px;
        gap: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .jt-tab-bar::-webkit-scrollbar { display: none; }
    .jt-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 10px 10px;
    }
    .jt-tab-right { display: none; }

    /* Output toolbar — horizontally scrollable pill row */
    .jt-output-toolbar {
        padding: 8px 10px;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .jt-output-toolbar::-webkit-scrollbar { display: none; }
    .jt-toolbar-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 10px;
        font-size: 0.78rem;
    }
    .jt-indent-sel { flex: 0 0 auto; font-size: 0.78rem; }
    .jt-toolbar-sep { display: none; }
    .jt-search-box { display: none; }

    /* Mobile scroll strategy:
       INPUT is a textarea — needs a fixed container with internal scroll.
       OUTPUT is a display surface — should grow with content so the PAGE
       scrolls naturally. This avoids the "trapped inside a tiny scroll box"
       problem where touches get captured by an internal overflow. */
    .jt-input-col {
        height: 280px !important;
    }
    .jt-editor-pane {
        height: 280px;
    }

    /* Output pane: grow with content, no internal scroll.
       The base .jt-output-pane has overflow:hidden (for the desktop rounded-
       corner shell clipping) — we must undo that on mobile, otherwise the
       pane clips any content taller than its min-height. */
    .jt-output-pane {
        height: auto !important;
        min-height: 320px;
        overflow: visible !important;
    }
    .jt-output-pane .jt-panel {
        flex: 0 0 auto;
        overflow: visible;
        max-height: none;
    }
    /* The <pre> output: wrap long lines instead of horizontal-scrolling.
       A horizontal scroll container on mobile captures vertical touches
       and blocks page scrolling — text wrapping avoids the container
       entirely, letting the whole output flow naturally with page scroll. */
    .jt-output-pane .jt-output-code {
        overflow: visible;
        max-height: none;
        white-space: pre-wrap;
        word-break: break-word;
    }
    /* Tree and Stats panels: same — grow naturally */
    .jt-output-pane #jt-panel-tree,
    .jt-output-pane #jt-panel-stats {
        overflow: visible;
        max-height: none;
    }
    /* Graph panel is a special case — it NEEDS an internal canvas, so keep
       a bounded height for it only. */
    .jt-output-pane #jt-panel-graph {
        height: 420px;
        flex: 0 0 420px;
        overflow: hidden;
    }
    /* Slightly taller pane header + tab bar = bigger swipe-safe zones where
       touches definitely scroll the page, not the textarea. */
    .jt-pane-header,
    .jt-tab-bar {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    /* Let touch scroll inside the textarea propagate to the page once the
       textarea reaches its own scroll boundary (Chrome/Firefox mobile). */
    .jt-input,
    .jt-output-code,
    .jt-tree-view {
        overscroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stats grid — 2 columns on phone */
    .jt-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* JSONPath bar — allow wrapping */
    .jt-jpath-bar { flex-wrap: wrap; gap: 6px; padding: 8px; }
    .jt-jpath-input { flex: 1 1 100%; min-width: 0; }

    /* Input textarea — prevent iOS zoom-on-focus (requires >= 16px) */
    .jt-input { font-size: 16px; }
    .jt-line-nums { font-size: 16px; }
}

/* Very small phones — even tighter */
@media (max-width: 420px) {
    .jt-action-bar { padding: 6px 8px; }
    .jt-mode-btn { font-size: 0.72rem; padding: 7px 4px; gap: 4px; }
    .jt-mode-btn i { font-size: 0.8em; }
    .jt-action-btn { font-size: 0.72rem; padding: 6px 9px; }

    /* Hide text labels on utility buttons — icon-only to save space.
       Keep labels on Format/Minify/Diff (mode group) and Auto-Fix for clarity. */
    .jt-action-right .jt-action-btn { padding: 7px 9px; }
    .jt-action-right .jt-action-btn:not(.jt-theme-btn):not(.jt-fs-btn)::after { content: none; }
    .jt-fs-label { display: none; }

    .jt-input-col { height: 240px !important; }
    .jt-editor-pane { height: 240px; }
    .jt-output-pane { min-height: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Clean editor aesthetic devs actually love
   Inspired by GitHub Light + VS Code Light+, with EasifyMe's depth treatment.
   Default theme (no [data-theme="dark"] = light). Dark mode is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tool shell — hero gradient canvas with ambient glows ───────────────── */
html:not([data-theme="dark"]) .jt-tool {
    background:
        linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 45%, #FDF2F8 100%);
    border: 1px solid rgba(139, 92, 246, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 30px 80px -30px rgba(139, 92, 246, 0.28),
        0 12px 32px -16px rgba(59, 130, 246, 0.15);
}
html:not([data-theme="dark"]) .jt-tool::before {
    background:
        radial-gradient(ellipse 55% 50% at 12% 0%, rgba(59, 130, 246, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 88% 100%, rgba(236, 72, 153, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
}
html:not([data-theme="dark"]) .tool-interface-card:has(.jt-tool) {
    background: transparent;
}

/* ── Action Bar — glass over the gradient canvas ────────────────────────── */
html:not([data-theme="dark"]) .jt-action-bar {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 8px 24px -12px rgba(139, 92, 246, 0.18),
        0 1px 2px rgba(15, 23, 42, 0.04);
}
html:not([data-theme="dark"]) .jt-mode-group {
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.08);
}
html:not([data-theme="dark"]) .jt-mode-btn { color: #64748B; }
html:not([data-theme="dark"]) .jt-mode-btn:hover { color: #0F172A; }
html:not([data-theme="dark"]) .jt-mode-btn.active {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(59, 130, 246, 0.5);
}

html:not([data-theme="dark"]) .jt-action-btn {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-action-btn:hover {
    color: #0F172A;
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(180deg, #FFFFFF, #EFF6FF);
    box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.25);
}
html:not([data-theme="dark"]) .jt-action-btn.jt-export-btn {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border-color: transparent;
    color: #fff;
    box-shadow:
        0 8px 22px -8px rgba(59, 130, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}
html:not([data-theme="dark"]) .jt-action-btn.jt-export-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #4F8FF7, #7C7FF7);
    border-color: transparent;
    box-shadow:
        0 12px 28px -8px rgba(59, 130, 246, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
html:not([data-theme="dark"]) .jt-action-btn.jt-fix-btn {
    color: #B45309;
    background: linear-gradient(180deg, #FFFBEB, #FEF3C7);
    border-color: rgba(245, 158, 11, 0.4);
}
html:not([data-theme="dark"]) .jt-action-btn.jt-fix-btn:hover {
    color: #92400E;
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 6px 18px -8px rgba(245, 158, 11, 0.4);
}
html:not([data-theme="dark"]) .jt-action-sep {
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.15), transparent);
}

/* ── Editor Panes — frosted glass on the gradient canvas ────────────────── */
html:not([data-theme="dark"]) .jt-editor-pane,
html:not([data-theme="dark"]) .jt-output-pane {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px rgba(139, 92, 246, 0.06) inset,
        0 18px 50px -24px rgba(139, 92, 246, 0.22),
        0 8px 24px -16px rgba(59, 130, 246, 0.15);
}
html:not([data-theme="dark"]) .jt-editor-pane:focus-within,
html:not([data-theme="dark"]) .jt-output-pane:focus-within {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 3px rgba(139, 92, 246, 0.12),
        0 18px 50px -24px rgba(139, 92, 246, 0.3);
}
html:not([data-theme="dark"]) .jt-pane-header,
html:not([data-theme="dark"]) .jt-tab-bar,
html:not([data-theme="dark"]) .jt-output-toolbar {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.85), rgba(245, 243, 255, 0.85));
    border-bottom: 1px solid rgba(139, 92, 246, 0.12);
}
html:not([data-theme="dark"]) .jt-output-toolbar { border-top-color: rgba(15, 23, 42, 0.08); border-bottom: none; }
html:not([data-theme="dark"]) .jt-pane-title { color: #0369A1; }
html:not([data-theme="dark"]) .jt-pane-meta { color: #64748B; }

html:not([data-theme="dark"]) .jt-line-nums {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.6), rgba(245, 243, 255, 0.6));
    color: #A78BFA;
    border-right: 1px solid rgba(139, 92, 246, 0.12);
}
html:not([data-theme="dark"]) .jt-input {
    color: #0F172A;
    caret-color: #0369A1;
}
html:not([data-theme="dark"]) .jt-input::placeholder { color: #94A3B8; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-tab-btn { color: #64748B; }
html:not([data-theme="dark"]) .jt-tab-btn:hover { color: #0F172A; }
html:not([data-theme="dark"]) .jt-tab-btn.active { color: #0369A1; }

/* ── Output Panel + Syntax Highlighting (GitHub Light inspired) ────────── */
html:not([data-theme="dark"]) .jt-panel {
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(139, 92, 246, 0.05), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(236, 72, 153, 0.04), transparent 70%),
        rgba(255, 255, 255, 0.5);
    scrollbar-color: rgba(139, 92, 246, 0.25) transparent;
}
html:not([data-theme="dark"]) .jt-panel::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.22);
    border: 2px solid transparent;
    background-clip: padding-box;
}
html:not([data-theme="dark"]) .jt-panel::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.3); }

html:not([data-theme="dark"]) .jt-output-code { color: #1E293B; }
html:not([data-theme="dark"]) .jt-key    { color: #0550AE; }
html:not([data-theme="dark"]) .jt-string { color: #15803D; }
html:not([data-theme="dark"]) .jt-number { color: #C2410C; }
html:not([data-theme="dark"]) .jt-bool   { color: #7C3AED; }
html:not([data-theme="dark"]) .jt-null   { color: #DC2626; }

html:not([data-theme="dark"]) .jt-search-mark {
    background: #FEF08A;
    color: #0F172A;
}

/* ── Errors ─────────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-error-msg {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}
html:not([data-theme="dark"]) .jt-error-msg:hover { background: #FEE2E2; }
html:not([data-theme="dark"]) .jt-error-msg .jt-err-jump {
    background: rgba(239, 68, 68, 0.18);
    color: #991B1B;
}
html:not([data-theme="dark"]) .jt-error-marker {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.02));
}
html:not([data-theme="dark"]) .jt-badge-valid {
    background: rgba(34, 197, 94, 0.12);
    color: #15803D;
    border-color: rgba(34, 197, 94, 0.35);
}
html:not([data-theme="dark"]) .jt-badge-error {
    background: rgba(239, 68, 68, 0.1);
    color: #B91C1C;
    border-color: rgba(239, 68, 68, 0.35);
}

/* ── Output Toolbar ─────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-toolbar-btn {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-toolbar-btn:hover {
    background: #EFF6FF;
    color: #0F172A;
    border-color: rgba(59, 130, 246, 0.4);
}
html:not([data-theme="dark"]) .jt-search-input,
html:not([data-theme="dark"]) .jt-indent-sel,
html:not([data-theme="dark"]) .jt-jpath-input {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0F172A;
}
html:not([data-theme="dark"]) .jt-search-input::placeholder,
html:not([data-theme="dark"]) .jt-jpath-input::placeholder { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-search-input:focus,
html:not([data-theme="dark"]) .jt-jpath-input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
html:not([data-theme="dark"]) .jt-toolbar-sep,
html:not([data-theme="dark"]) .jt-jpath-sep {
    background: rgba(15, 23, 42, 0.1);
}
html:not([data-theme="dark"]) .jt-search-box { color: #94A3B8; }

/* ── JSONPath Bar + mini buttons ────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-jpath-bar {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.7), rgba(245, 243, 255, 0.7));
    border-bottom: 1px solid rgba(139, 92, 246, 0.12);
    color: #64748B;
}
html:not([data-theme="dark"]) .jt-jpath-result { color: #64748B; }
html:not([data-theme="dark"]) .jt-mini-btn,
html:not([data-theme="dark"]) .jt-mini-select {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-mini-btn:hover {
    background: #EFF6FF;
    color: #0F172A;
    border-color: rgba(59, 130, 246, 0.4);
}

/* ── Tree View ──────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-tree-view { color: #1E293B; }
html:not([data-theme="dark"]) .jt-tree-key { color: #0550AE; }
html:not([data-theme="dark"]) .jt-bracket { color: #475569; }
html:not([data-theme="dark"]) .jt-tree-children { border-left-color: rgba(15, 23, 42, 0.1); }
html:not([data-theme="dark"]) .jt-count { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-tree-toggle { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-tree-toggle:hover { color: #0369A1; }
html:not([data-theme="dark"]) .jt-tree-error { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-node-actions {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.15);
}
html:not([data-theme="dark"]) .jt-node-action { color: #64748B; }
html:not([data-theme="dark"]) .jt-node-action:hover { background: #EFF6FF; color: #0F172A; }
html:not([data-theme="dark"]) .jt-node-action.copied { color: #15803D; }

/* ── X-Ray decoded panels (light variant) ───────────────────────────────── */
html:not([data-theme="dark"]) .jt-xray-decoded {
    background: #F8FAFC;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 3px solid #8B5CF6;
    color: #475569;
}
html:not([data-theme="dark"]) .jt-xray-thumb {
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.15);
}

/* ── Stats Cards ────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-stat-card {
    background: linear-gradient(160deg, #EFF6FF, #F5F3FF);
    border: 1px solid rgba(15, 23, 42, 0.08);
}
html:not([data-theme="dark"]) .jt-stat-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 12px 28px -16px rgba(59, 130, 246, 0.3);
}
html:not([data-theme="dark"]) .jt-stat-lbl { color: #64748B; }

/* ── Smart Paste Toast ──────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-smart-paste {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #0F172A;
    box-shadow:
        0 24px 60px -16px rgba(59, 130, 246, 0.25),
        0 12px 32px -8px rgba(15, 23, 42, 0.15);
}
html:not([data-theme="dark"]) .jt-sp-title { color: #0F172A; }
html:not([data-theme="dark"]) .jt-sp-desc { color: #64748B; }
html:not([data-theme="dark"]) .jt-sp-btn {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.15);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-sp-btn:hover { color: #0F172A; border-color: rgba(59, 130, 246, 0.5); }

/* ── Time Travel Drawer ─────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-drawer-backdrop,
html:not([data-theme="dark"]) .jt-modal-backdrop {
    background: rgba(15, 23, 42, 0.4);
}
html:not([data-theme="dark"]) .jt-drawer-panel {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    border-left: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: -24px 0 60px -16px rgba(15, 23, 42, 0.2);
}
html:not([data-theme="dark"]) .jt-drawer-header { border-bottom-color: rgba(15, 23, 42, 0.08); }
html:not([data-theme="dark"]) .jt-drawer-title { color: #0F172A; }
html:not([data-theme="dark"]) .jt-drawer-sub { color: #64748B; }
html:not([data-theme="dark"]) .jt-drawer-close {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #64748B;
}
html:not([data-theme="dark"]) .jt-drawer-close:hover { color: #0F172A; border-color: rgba(59, 130, 246, 0.5); }
html:not([data-theme="dark"]) .jt-drawer-footer { border-top-color: rgba(15, 23, 42, 0.08); }
html:not([data-theme="dark"]) .jt-drawer-hint { color: #94A3B8; }

html:not([data-theme="dark"]) .jt-tt-empty { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-tt-item {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.08);
}
html:not([data-theme="dark"]) .jt-tt-item:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 8px 22px -10px rgba(59, 130, 246, 0.2);
}
html:not([data-theme="dark"]) .jt-tt-item.current {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(160deg, #EFF6FF, #F5F3FF);
}
html:not([data-theme="dark"]) .jt-tt-time { color: #1E293B; }
html:not([data-theme="dark"]) .jt-tt-meta,
html:not([data-theme="dark"]) .jt-tt-size,
html:not([data-theme="dark"]) .jt-tt-preview { color: #64748B; }
html:not([data-theme="dark"]) .jt-tt-action {
    background: #FAFBFC;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-tt-action:hover {
    background: #EFF6FF;
    color: #0F172A;
    border-color: rgba(59, 130, 246, 0.4);
}

/* ── Type Generator Modal ───────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-modal-panel {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.3);
}
html:not([data-theme="dark"]) .jt-modal-header { border-bottom-color: rgba(15, 23, 42, 0.08); }
html:not([data-theme="dark"]) .jt-modal-title { color: #0F172A; }
html:not([data-theme="dark"]) .jt-modal-close {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #64748B;
}
html:not([data-theme="dark"]) .jt-modal-close:hover { color: #0F172A; border-color: rgba(59, 130, 246, 0.5); }
html:not([data-theme="dark"]) .jt-modal-tabs {
    background: #F8FAFC;
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
html:not([data-theme="dark"]) .jt-mt-tab { color: #64748B; }
html:not([data-theme="dark"]) .jt-mt-tab:hover { color: #0F172A; }
html:not([data-theme="dark"]) .jt-mt-tab.active { color: #0369A1; }
html:not([data-theme="dark"]) .jt-modal-body { background: #FAFBFC; }
html:not([data-theme="dark"]) .jt-types-output { color: #1E293B; }
html:not([data-theme="dark"]) .jt-modal-footer { border-top-color: rgba(15, 23, 42, 0.08); }
html:not([data-theme="dark"]) .jt-modal-hint { color: #94A3B8; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 2 — Diff mode result rows + Convert modal extras
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Diff result rendering (dark default) ───────────────────────────────── */
.jt-diff-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-family: var(--font-body);
}
.jt-diff-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.jt-diff-stat-add    { color: #4ADE80; }
.jt-diff-stat-remove { color: #F87171; }
.jt-diff-stat-change { color: #FCD34D; }
.jt-diff-stat-same   { color: #64748B; margin-left: auto; }

.jt-diff-list {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.jt-diff-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    align-items: baseline;
}
.jt-diff-mark { font-weight: 800; text-align: center; opacity: 0.85; }
.jt-diff-path { color: #94A3B8; word-break: break-all; }
.jt-diff-value {
    color: #CBD5E1;
    word-break: break-all;
}
.jt-diff-value-old {
    color: #FCA5A5;
    text-decoration: line-through;
    opacity: 0.85;
    margin-right: 8px;
}
.jt-diff-value-new { color: #86EFAC; }
.jt-diff-arrow { color: #64748B; margin: 0 6px; }

.jt-diff-row-add {
    background: rgba(34, 197, 94, 0.08);
    border-left-color: #22C55E;
}
.jt-diff-row-add .jt-diff-mark { color: #4ADE80; }

.jt-diff-row-remove {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #EF4444;
}
.jt-diff-row-remove .jt-diff-mark { color: #F87171; }

.jt-diff-row-change {
    background: rgba(245, 158, 11, 0.08);
    border-left-color: #F59E0B;
}
.jt-diff-row-change .jt-diff-mark { color: #FCD34D; }

.jt-diff-empty {
    padding: 60px 20px;
    text-align: center;
    color: #64748B;
    font-size: 0.85rem;
}
.jt-diff-empty i { font-size: 2.4rem; display: block; margin-bottom: 14px; opacity: 0.4; }
.jt-diff-empty strong { color: #93C5FD; }

/* Modal tab separator (between Type Generators and Format Converters) */
.jt-mt-tab-sep {
    width: 1px;
    height: 22px;
    background: rgba(148, 163, 184, 0.2);
    margin: 0 6px;
    flex-shrink: 0;
    align-self: center;
}

/* ── Light-mode overrides for diff + modal extras ───────────────────────── */
html:not([data-theme="dark"]) .jt-diff-summary {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(139, 92, 246, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html:not([data-theme="dark"]) .jt-diff-stat-add    { color: #15803D; }
html:not([data-theme="dark"]) .jt-diff-stat-remove { color: #B91C1C; }
html:not([data-theme="dark"]) .jt-diff-stat-change { color: #B45309; }
html:not([data-theme="dark"]) .jt-diff-stat-same   { color: #64748B; }

html:not([data-theme="dark"]) .jt-diff-path { color: #64748B; }
html:not([data-theme="dark"]) .jt-diff-value { color: #1E293B; }
html:not([data-theme="dark"]) .jt-diff-value-old { color: #B91C1C; }
html:not([data-theme="dark"]) .jt-diff-value-new { color: #15803D; }
html:not([data-theme="dark"]) .jt-diff-arrow { color: #94A3B8; }

html:not([data-theme="dark"]) .jt-diff-row-add {
    background: rgba(34, 197, 94, 0.1);
    border-left-color: #16A34A;
}
html:not([data-theme="dark"]) .jt-diff-row-add .jt-diff-mark { color: #15803D; }

html:not([data-theme="dark"]) .jt-diff-row-remove {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #DC2626;
}
html:not([data-theme="dark"]) .jt-diff-row-remove .jt-diff-mark { color: #B91C1C; }

html:not([data-theme="dark"]) .jt-diff-row-change {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #D97706;
}
html:not([data-theme="dark"]) .jt-diff-row-change .jt-diff-mark { color: #B45309; }

html:not([data-theme="dark"]) .jt-diff-empty { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-diff-empty strong { color: #0369A1; }

html:not([data-theme="dark"]) .jt-mt-tab-sep { background: rgba(15, 23, 42, 0.12); }

/* ── Light mode — Export modal extras ───────────────────────────────────── */
html:not([data-theme="dark"]) .jt-modal-header {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.7), transparent);
}
html:not([data-theme="dark"]) .jt-modal-iconcircle {
    box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.35);
}
html:not([data-theme="dark"]) .jt-modal-subtitle { color: #64748B; }
html:not([data-theme="dark"]) .jt-mt-section-row,
html:not([data-theme="dark"]) .jt-mt-section-block {
    background: rgba(239, 246, 255, 0.45);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
html:not([data-theme="dark"]) .jt-mt-section-label { color: #64748B; }
html:not([data-theme="dark"]) .jt-mt-filter {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.1);
}
html:not([data-theme="dark"]) .jt-mt-filter-btn { color: #64748B; }
html:not([data-theme="dark"]) .jt-mt-filter-btn:hover { color: #0F172A; }
html:not([data-theme="dark"]) .jt-mt-filter-btn.active { color: #fff; }
html:not([data-theme="dark"]) .jt-mt-filter-btn:not(.active) .jt-mt-filter-count {
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-export-line-nums {
    background: rgba(248, 250, 252, 0.7);
    color: #94A3B8;
    border-right-color: rgba(15, 23, 42, 0.06);
}
html:not([data-theme="dark"]) .jt-mt-tab {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
html:not([data-theme="dark"]) .jt-mt-tab:hover {
    color: #0F172A;
    background: #EFF6FF;
    border-color: rgba(59, 130, 246, 0.4);
}
html:not([data-theme="dark"]) .jt-mt-tab.active {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(59, 130, 246, 0.45);
}
html:not([data-theme="dark"]) .jt-modal-body {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139, 92, 246, 0.05), transparent 70%),
        #FFFFFF;
}
html:not([data-theme="dark"]) .jt-modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-color: #FFFFFF;
}
html:not([data-theme="dark"]) .jt-modal-footer {
    background: rgba(248, 250, 252, 0.7);
}
html:not([data-theme="dark"]) .jt-modal-hint { color: #64748B; }
html:not([data-theme="dark"]) .jt-export-meta-bar {
    background: rgba(248, 250, 252, 0.85);
    border-bottom-color: rgba(15, 23, 42, 0.06);
}
html:not([data-theme="dark"]) .jt-export-lang-label { color: #0369A1; }
html:not([data-theme="dark"]) .jt-export-meta { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-types-output .jt-comment { color: #94A3B8; }

/* ═══════════════════════════════════════════════════════════════════════════
   🗺 GRAPH VIEW — interactive node-graph visualization
   ═══════════════════════════════════════════════════════════════════════════ */

.jt-tab-new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #EC4899, #F59E0B);
    color: #fff;
    border-radius: 8px;
    vertical-align: 1px;
}

/* Graph panel fills its parent — no internal scroll, the SVG is fully draggable */
.jt-panel-graph {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Graph toolbar ─────────────────────────────────────────────────────── */
.jt-graph-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4));
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    flex-shrink: 0;
}
.jt-graph-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(11, 18, 32, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-md);
}
.jt-graph-toolbar-right { margin-left: auto; }
.jt-graph-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.18s ease;
    font-family: var(--font-body);
}
.jt-graph-tool-btn:hover {
    background: rgba(59, 130, 246, 0.18);
    color: #F8FAFC;
}
.jt-graph-tool-btn i { font-size: 0.85em; }
.jt-graph-zoom-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #93C5FD;
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
    padding: 0 6px;
}

/* ── Graph canvas ─────────────────────────────────────────────────────── */
.jt-graph-canvas-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(59, 130, 246, 0.06), transparent 70%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(236, 72, 153, 0.05), transparent 70%),
        #0B1220;
}
.jt-graph-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}
.jt-graph-svg.is-dragging { cursor: grabbing; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.jt-graph-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #64748B;
    font-family: var(--font-body);
    pointer-events: none;
    padding: 20px;
}
.jt-graph-empty i {
    font-size: 3rem;
    opacity: 0.4;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.7;
}
.jt-graph-empty strong {
    font-size: 1rem;
    color: #93C5FD;
    font-weight: 700;
}
.jt-graph-empty span {
    font-size: 0.82rem;
    max-width: 360px;
    line-height: 1.55;
}

/* ── Edges ────────────────────────────────────────────────────────────── */
.jt-graph-edge {
    fill: none;
    stroke: rgba(148, 163, 184, 0.45);
    stroke-width: 1.6;
    transition: stroke 0.18s ease, stroke-width 0.18s ease;
}
.jt-graph-edge:hover {
    stroke: #93C5FD;
    stroke-width: 2.2;
}

/* ── Nodes ────────────────────────────────────────────────────────────── */
.jt-graph-node {
    cursor: default;
    transition: filter 0.2s ease;
}
.jt-graph-node:hover {
    filter: drop-shadow(0 8px 20px rgba(59, 130, 246, 0.35));
}

.jt-graph-node-bg {
    fill: rgba(15, 23, 42, 0.92);
    stroke: rgba(96, 165, 250, 0.25);
    stroke-width: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.jt-graph-node-header-bg {
    fill: rgba(59, 130, 246, 0.18);
}
.jt-graph-node-array .jt-graph-node-header-bg {
    fill: rgba(245, 158, 11, 0.18);
}
.jt-graph-node-object .jt-graph-node-bg { stroke: rgba(96, 165, 250, 0.4); }
.jt-graph-node-array  .jt-graph-node-bg { stroke: rgba(245, 158, 11, 0.4); }

.jt-graph-node-type {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    fill: #93C5FD;
}
.jt-graph-node-array .jt-graph-node-type { fill: #FCD34D; }

.jt-graph-node-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    fill: #F1F5F9;
}
.jt-graph-node-count {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    fill: #64748B;
}

.jt-graph-row-key {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    fill: #93C5FD;
}
.jt-graph-row-val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}
.jt-graph-row-val-string  { fill: #86EFAC; }
.jt-graph-row-val-number  { fill: #FDE68A; }
.jt-graph-row-val-boolean { fill: #FB923C; }
.jt-graph-row-val-null    { fill: #F87171; }

/* ── LIGHT MODE OVERRIDES ─────────────────────────────────────────────── */
html:not([data-theme="dark"]) .jt-graph-toolbar {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.85), rgba(245, 243, 255, 0.85));
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
html:not([data-theme="dark"]) .jt-graph-toolbar-group {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.1);
}
html:not([data-theme="dark"]) .jt-graph-tool-btn { color: #64748B; }
html:not([data-theme="dark"]) .jt-graph-tool-btn:hover {
    background: #EFF6FF;
    color: #0F172A;
}
html:not([data-theme="dark"]) .jt-graph-zoom-label { color: #0369A1; }

html:not([data-theme="dark"]) .jt-graph-canvas-wrap {
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(59, 130, 246, 0.08), transparent 70%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(236, 72, 153, 0.08), transparent 70%),
        #FAFBFF;
}
html:not([data-theme="dark"]) .jt-graph-empty { color: #94A3B8; }
html:not([data-theme="dark"]) .jt-graph-empty strong { color: #0369A1; }

html:not([data-theme="dark"]) .jt-graph-edge {
    stroke: rgba(15, 23, 42, 0.25);
}
html:not([data-theme="dark"]) .jt-graph-edge:hover {
    stroke: #3B82F6;
}

html:not([data-theme="dark"]) .jt-graph-node-bg {
    fill: #FFFFFF;
    stroke: rgba(15, 23, 42, 0.12);
    filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.1));
}
html:not([data-theme="dark"]) .jt-graph-node-header-bg {
    fill: #DBEAFE;
}
html:not([data-theme="dark"]) .jt-graph-node-array .jt-graph-node-header-bg {
    fill: #FEF3C7;
}
html:not([data-theme="dark"]) .jt-graph-node-object .jt-graph-node-bg { stroke: rgba(59, 130, 246, 0.3); }
html:not([data-theme="dark"]) .jt-graph-node-array  .jt-graph-node-bg { stroke: rgba(245, 158, 11, 0.35); }

html:not([data-theme="dark"]) .jt-graph-node-type { fill: #0550AE; }
html:not([data-theme="dark"]) .jt-graph-node-array .jt-graph-node-type { fill: #B45309; }
html:not([data-theme="dark"]) .jt-graph-node-label { fill: #0F172A; }
html:not([data-theme="dark"]) .jt-graph-node-count { fill: #64748B; }

html:not([data-theme="dark"]) .jt-graph-row-key { fill: #0550AE; }
html:not([data-theme="dark"]) .jt-graph-row-val-string  { fill: #15803D; }
html:not([data-theme="dark"]) .jt-graph-row-val-number  { fill: #C2410C; }
html:not([data-theme="dark"]) .jt-graph-row-val-boolean { fill: #7C3AED; }
html:not([data-theme="dark"]) .jt-graph-row-val-null    { fill: #DC2626; }

/* ── Responsive — stack tab sections on narrow viewports ────────────────── */
@media (max-width: 720px) {
    .jt-mt-section-row { grid-template-columns: 1fr; gap: 14px; }
    .jt-modal-panel { width: 96vw; max-height: 92vh; }
    .jt-modal-titlewrap { gap: 10px; }
    .jt-modal-iconcircle { width: 38px; height: 38px; }
    .jt-modal-title { font-size: 1rem; }
}