.br-modal-title-sub { font-size: var(--fs-md); color: var(--text-muted); font-weight: 400; }

/* Two panes side by side: the shared column picker on the left, format + output
   on the right. Both panes are min 60vh, and the card height is `auto` (not the
   .modal-content 80vh) so the popup grows to whatever the panes need. */
#exportModal .exp-modal-content {
    width: 1080px; max-width: 96%;
    height: auto; max-height: 92vh;
}
.exp-modal-body { padding: 0 !important; overflow: hidden; display: flex; min-height: 0; }
.exp-split {
    flex: 1; min-width: 0;
    display: grid; grid-template-columns: 340px minmax(0, 1fr);
}
.exp-pane { display: flex; flex-direction: column; min-width: 0; min-height: 60vh; }
.exp-pane--cols { border-right: 1px solid var(--border-color); }
.exp-pane--opts { padding: 1.1rem 1.25rem; overflow-y: auto; }

.exp-picker { flex: 1; min-height: 0; }

.exp-section { margin-bottom: 1.25rem; }
.exp-section > h4 {
    margin: 0 0 0.6rem 0; font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
    display: flex; align-items: center; justify-content: space-between;
}
.exp-radios label {
    display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-md);
    cursor: pointer; padding: 0.15rem 0; white-space: nowrap;
}
.exp-radios { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Output fills whatever height is left in the right pane. */
.exp-section--output { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; }
.exp-output-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.exp-output-bar h4 { margin: 0; }
.exp-output-bar .exp-actions { display: flex; gap: 0.5rem; }
/* Fixed icon box + its own label span, so the Copy -> Copied swap changes the
   text and nothing else. min-width reserves the wider word up front, so the
   button does not grow either. */
.exp-act-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem; min-width: 6.2rem; white-space: nowrap;
}
.exp-btn-ico {
    flex: 0 0 auto; width: 1em; height: 1em; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.exp-btn-ico i, .exp-btn-ico svg {
    width: 1em; height: 1em; font-size: 1em; line-height: 1; display: block;
}
#export-output {
    margin: 0; flex: 1; min-height: 220px; overflow: auto; border-radius: 8px;
    background: #1e293b; color: #e2e8f0; padding: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm); line-height: 1.5; white-space: pre; tab-size: 2;
}
#export-output .json-key  { color: #7dd3fc; }
#export-output .json-str  { color: #86efac; }
#export-output .json-num  { color: #fca5a5; }
#export-output .json-bool { color: #c4b5fd; }
#export-output .json-null { color: #94a3b8; font-style: italic; }
#exportModal .exp-jsonkey-wrap { display: none; }
#exportModal.show-jsonkey .exp-jsonkey-wrap { display: block; }

@media (max-width: 900px) {
    #btn-export { display: none !important; }
}

/* Stacked: the two panes become two rows, each free to shrink. */
@media (max-width: 820px) {
    #exportModal .exp-modal-content { width: 100%; height: 92vh; max-height: 92vh; }
    .exp-modal-body { overflow-y: auto; }
    .exp-split { grid-template-columns: 1fr; }
    .exp-pane { min-height: 0; }
    .exp-pane--cols { border-right: 0; border-bottom: 1px solid var(--border-color); max-height: 38vh; }
    .exp-pane--opts { padding: 1rem; }
    .exp-radios { gap: 0.8rem; }
    #export-output { min-height: 160px; font-size: var(--fs-xs); }
}
@media (max-width: 480px) {
    .exp-output-bar { flex-wrap: wrap; gap: 0.5rem; }
}