/* extras over neon-ui — only tokens, no new palette */
.brand { font-family: var(--font-mono); font-weight: 700; color: var(--fg); text-decoration: none; }
.brand span { color: var(--accent); }
.top { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-6); }
textarea {
  width: 100%; min-height: 220px; resize: vertical; padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); font: var(--text-sm)/var(--leading-body) var(--font-mono);
}
textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.toggle { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--fg-2); font-size: var(--text-sm); cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.win { display: none; padding: var(--space-5); border-radius: var(--radius-md); background: var(--success); color: var(--accent-on); font: 800 var(--text-xl)/var(--leading-tight) var(--font-display); }
.win.show { display: block; }
.err { color: var(--danger); font-size: var(--text-sm); }
.err:empty { display: none; }
.out { display: none; padding: var(--space-5); }
.out.show { display: block; }
.out a { color: var(--accent); }
.mono, code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--meta); word-break: break-all; }
.nicks { margin: 0; padding-left: var(--space-5); color: var(--fg-2); }
.hint { color: var(--muted); font-size: var(--text-xs); }
.panel-body { padding: var(--space-5); }
.panel-body > * + * { margin-block-start: var(--space-4); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.qr { width: 160px; height: 160px; background: var(--fg); border-radius: var(--radius-sm); }
@media (max-width: 639px) {
  h1 { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary:hover { transition: none; transform: none; }
}