/* MoonTik — mode streamer : liaisons, QR, PIN (pages de réglages) */
.pad-card .pad-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pad-binds { display: grid; gap: 8px; }
.pad-bind { display: grid; grid-template-columns: 140px 1fr auto; gap: 8px; align-items: center; }
.pad-bind b { font-size: 13px; font-weight: 600; }
.pad-keys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pad-keys button, .pad-bind .pad-pad {
  background: #27272a; border: 1px solid #3f3f46; border-radius: 8px; color: #e4e4e7;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 5px 9px; cursor: pointer;
}
.pad-keys button:hover, .pad-bind .pad-pad:hover { border-color: var(--accent, #7c5cff); color: #fff; }
.pad-keys button.waiting, .pad-bind .pad-pad.waiting { border-color: #fbbf24; color: #fbbf24; animation: padPulse 1s ease-in-out infinite; }
@keyframes padPulse { 50% { opacity: .55; } }
.pad-qrbox { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pad-qrbox img, .pad-qrbox canvas { width: 168px; height: 168px; background: #fff; border-radius: 10px; padding: 8px; }
.pad-pin { font: 700 28px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .28em; color: #fff; }
.pad-url { font-size: 12px; color: var(--muted); word-break: break-all; }