/* QR tab — scoped styles. Reuses dashboard .card / .btn / .field-input where possible. */

.qr-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6, 24px); align-items: start; }
@media (max-width: 900px) { .qr-layout { grid-template-columns: 1fr; } }

.qr-field-label { display: block; font-size: 12px; color: var(--text-muted, #9aa0b4); margin: 12px 0 5px; }
.qr-grp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qr-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.qr-row .qr-col { display: flex; flex-direction: column; }

.qr-studio { margin-top: 14px; border-top: 1px solid var(--line, #272b38); padding-top: 12px; }
.qr-studio > summary { cursor: pointer; font-size: 12px; color: var(--text-muted, #9aa0b4); letter-spacing: .08em; text-transform: uppercase; }

.qr-input { width: 100%; background: var(--surface-2, #1c1f29); border: 1px solid var(--line, #272b38); color: var(--text, #eef0f6); border-radius: 9px; padding: 10px 12px; font-size: 14px; outline: none; }
.qr-input:focus { border-color: var(--accent, #ff8a3d); }
select.qr-input { appearance: auto; }
.qr-color { width: 46px; height: 34px; padding: 2px; background: var(--surface-2, #1c1f29); border: 1px solid var(--line, #272b38); border-radius: 8px; }
.qr-range { width: 100%; }
.qr-check { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-muted, #9aa0b4); margin-top: 10px; }
.qr-check input { width: auto; }

.qr-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#qr-box { background: #fff; border-radius: 12px; padding: 14px; display: inline-block; }
#qr-box canvas, #qr-box svg { width: 280px; height: 280px; display: block; }
.qr-pill { font-size: 11.5px; background: var(--surface-2, #1c1f29); border: 1px solid var(--line, #272b38); border-radius: 999px; padding: 4px 10px; color: var(--text-muted, #9aa0b4); }

.qr-edit-banner { background: rgba(255,138,61,.12); border: 1px solid var(--accent, #ff8a3d); color: var(--accent, #ffd0ad); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px; display: none; }
.qr-edit-banner.show { display: block; }

.qr-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13.5px; }
.qr-table th, .qr-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line, #272b38); vertical-align: middle; }
.qr-table th { color: var(--text-muted, #9aa0b4); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.qr-url { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent, #ffd0ad); }
.qr-ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-muted { color: var(--text-muted, #9aa0b4); }
.qr-bad { color: #ff6b6b; }
.btn--sm { padding: 6px 11px; font-size: 12.5px; }

.qr-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--surface-2, #1c1f29); border: 1px solid var(--line, #272b38); color: var(--text, #eef0f6); padding: 11px 18px; border-radius: 10px; font-size: 13.5px; opacity: 0; transition: .25s; pointer-events: none; z-index: 200; }
.qr-toast.show { opacity: 1; }
.qr-toast.bad { border-color: #ff6b6b; color: #ffd9d9; }
.qr-toast.ok { border-color: #3ddc97; }