.devkit { display: grid; grid-template-columns: 190px 1fr; gap: 20px; }
.devkit-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.devkit-list a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .9rem; }
.devkit-list a:hover { background: var(--surface); }
.devkit-list a.on { background: var(--accent-bg); color: var(--accent-2); font-weight: 600; }
.devkit-select { display: none; }
.devkit-panel { display: grid; gap: 10px; align-content: start; min-width: 0; }
.devkit-panel textarea { min-height: 130px; }
.out-head { display: flex; justify-content: space-between; align-items: center; }
.devkit-panel pre { margin: 0; padding: 12px; min-height: 120px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: var(--mono); font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
.diff-out .add { color: var(--ok); background: var(--ok-bg); display: block; }
.diff-out .del { color: var(--bad); background: var(--bad-bg); display: block; }
@media (max-width: 640px) {
  .devkit { grid-template-columns: 1fr; }
  .devkit-list ul { display: none; }
  .devkit-select { display: block; }
  .devkit-panel .row { flex-wrap: wrap; }
}