.json-import {
 display: grid;
 grid-template-columns:
  minmax(220px, 280px)
  minmax(0, 1fr);
 gap: 16px;
 min-width: 0;
}

.json-import h3 {
 margin: 0 0 8px;
 font-size: 14px;
}

.json-import-side,
.json-import-main {
 min-width: 0;
}

.json-import-note {
 margin: 0 0 8px;
}

.json-import-targets {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 16px;
}

.json-import-target {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 width: 100%;
 padding: 8px 10px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.json-import-target:hover,
.json-import-target.active {
 border-color: var(
  --ring,
  var(--foreground)
 );
 background: var(--accent);
}

.json-import-target-label {
 font-weight: 600;
}

.json-import-target-columns,
.json-import-columns {
 font-size: 12px;
}

.json-import-preview {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.json-import-columns {
 margin: 0;
}

.json-import-sample {
 margin: 0;
 padding-left: 18px;
 font-size: 12px;
}

.json-import-sample li {
 margin: 0 0 4px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.json-import-tree {
 max-height: 260px;
 overflow: auto;
 padding: 8px 10px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
 font-size: 12px;
}

.json-import-node {
 padding-left: calc(
  var(--depth, 0) * 14px
 );
}

.json-import-row {
 display: flex;
 align-items: flex-start;
 gap: 6px;
 min-height: 24px;
}

.json-import-leaf,
.json-import-row > span {
 overflow-wrap: anywhere;
}

.json-import-toggle {
 display: inline-flex;
 flex: 0 0 auto;
 align-items: center;
 justify-content: center;
 width: 20px;
 height: 20px;
 margin-top: 1px;
 padding: 0;
 border: 0;
 background: transparent;
 color: inherit;
 cursor: pointer;
}

.json-import-toggle svg {
 transition: transform 0.12s ease;
}

.json-import-toggle[aria-expanded='true']
 svg {
 transform: rotate(90deg);
}

.json-import-use {
 flex: 0 0 auto;
 margin-left: auto;
 padding: 0 6px;
 border: 0;
 background: transparent;
 color: var(
  --muted-foreground,
  var(--muted)
 );
 font: inherit;
 font-size: 11px;
 cursor: pointer;
}

.json-import-use.active,
.json-import-target.active
 .json-import-use {
 color: inherit;
 font-weight: 600;
}

.json-import-more {
 margin: 2px 0 6px 28px;
}

.json-import-more-button {
 margin-left: 28px;
 padding: 0;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 text-decoration: underline;
 cursor: pointer;
}

.json-import-body {
 min-width: 0;
}

.dialog.json-import-dialog {
 max-width: 56rem;
 overflow: hidden;
}

.json-import-dialog
 > .json-import-body {
 flex: 1 1 auto;
 min-height: 0;
 overflow: auto;
}

.json-import-dialog > .dialog-footer {
 flex-shrink: 0;
}

@media (max-width: 800px) {
 .json-import {
  grid-template-columns: 1fr;
 }

 .json-import-tree {
  max-height: 280px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .json-import-toggle svg {
  transition: none;
 }
}