/* JSON to CSV — json-to-csv.css */
.json-csv-section {
    --tool-accent: #6366F1;
    --tool-accent-rgb: 99, 102, 241;
}

/* Convert button — match site primary gradient */
.json-csv-section #jc-btn-convert {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.json-csv-section #jc-btn-convert:hover:not(:disabled) {
    filter: none;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

/* Sibling CTA — breathing room inside the card */
.json-csv-section .tool-sibling-cta {
    margin: 0 20px 20px;
}

.jc-textarea {
    min-height: 420px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 1rem;
}

/* ── View toggle buttons (text / table) ── */
.jc-view-btn--active {
    color: var(--tool-accent);
    background: rgba(var(--tool-accent-rgb), 0.1);
}

/* ── Table preview ── */
.jc-table-wrap {
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.jc-table-scroll {
    flex: 1;
    overflow: auto;
    border-radius: 0;
}

.jc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.jc-table th {
    background: rgba(var(--tool-accent-rgb), 0.08);
    color: var(--tool-accent);
    font-weight: 700;
    padding: 8px 14px;
    text-align: left;
    border-bottom: 2px solid rgba(var(--tool-accent-rgb), 0.2);
    position: sticky;
    top: 0;
    z-index: 1;
}

.jc-table td {
    padding: 6px 14px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    color: var(--text-primary, #1E293B);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-table tbody tr:hover td {
    background: rgba(var(--tool-accent-rgb), 0.04);
}