#tool [hidden] { display: none !important; }
.gen-opts { border-top: 0; border-bottom: 1px solid var(--border); }
.gen-format { width: 100%; }
.gen-format > summary { display: none; }
.gen-format .group { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.gen-name { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; font-size: 14px; }
.gen-name input, .gen-field { height: 40px; padding: 0 12px; font: 15px var(--mono); color: var(--ink); background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; min-width: 0; flex: 1; width: 100%; }
.gen-name input:focus, .gen-field:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.gen-out { padding: 16px; }
.uuid-one { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; padding: 28px 12px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-ctl); }
.uuid-one code { font: 600 24px/1.3 var(--mono); overflow-wrap: anywhere; text-align: center; min-width: 0; }
.uuid-list { margin: 0; padding: 6px 0; list-style: none; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--code-bg); counter-reset: u; }
.uuid-list li { display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 12px; font: 14px/1.5 var(--mono); counter-increment: u; }
.uuid-list li::before { content: counter(u); color: var(--muted); min-width: 3ch; text-align: right; font-size: 12px; }
.uuid-list li span { flex: 1; overflow-wrap: anywhere; min-width: 0; }
.uuid-list li:hover { background: var(--blue-tint); }
.uuid-list .btn { width: 32px; height: 32px; padding: 0; justify-content: center; }
.uuid-wrapped { margin: 10px 0 0; padding: 10px 12px; font: 13px/1.5 var(--mono); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-ctl); max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.gen-inspect { border-top: 1px solid var(--border); padding: 16px; }
.gen-inspect h2.pane-title { font-size: 16px; margin: 0; }
.ins-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.ins-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 5px 8px 5px 0; width: 9em; }
.ins-table td { font-family: var(--mono); padding: 5px 0; overflow-wrap: anywhere; }
.ins-ok { color: var(--teal-dark); font-weight: 600; }
.ins-err { margin-top: 10px; color: var(--danger); background: var(--danger-tint); padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.ins-info { margin-top: 10px; background: var(--blue-tint); padding: 8px 12px; border-radius: 10px; font-size: 14px; }
#tool > .notice { margin-top: 0; }
@media (max-width: 768px) {
  .gen-ver { width: 100%; }
  .gen-ver .segmented { overflow-x: auto; max-width: 100%; }
  .gen-ver .segmented label { min-height: 44px; padding: 10px 14px; }
  .gen-format { border-top: 1px solid var(--border); padding-top: 4px; }
  .gen-format > summary { display: block; font-weight: 600; padding: 8px 0; cursor: pointer; }
  .gen-out, .gen-inspect { padding: 12px; }
  .gen-name { padding: 12px 12px 0; flex-wrap: wrap; }
  .uuid-one code { font-size: 17px; }
  .uuid-list li { font-size: 12.5px; padding-left: 6px; }
  .uuid-list .btn { width: 44px; height: 44px; }
  .gen-field, .gen-name input { height: 44px; }
}
.example pre { overflow-wrap: anywhere; }
.example .ex-cols > div { min-width: 0; }
@media (max-width: 900px) {
  .gen-opts { order: 1; border-top: 0 !important; } .gen-name { order: 2; } .gen-out { order: 3; } #tool > .notice { order: 4; } .gen-inspect { order: 5; }
}