/* ═══════════════════════════════════════════════
   QR APP
═══════════════════════════════════════════════ */

.qr-wrap {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.qr-tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--bg2, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 10px);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
}

.qr-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: calc(var(--radius, 10px) - 2px);
    background: transparent;
    color: var(--muted, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-base, system-ui, sans-serif);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.qr-tab:hover { color: var(--text, #0f172a); }

.qr-tab.is-active {
    background: var(--bg, #fff);
    color: var(--text, #0f172a);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.qr-panel { display: none; }
.qr-panel.is-active { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

.qr-panel .field { width: 100%; }

.qr-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

/* qrcodejs renders both img + canvas — hide canvas */
#qr-output {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

#qr-box {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 10px);
    padding: 1rem;
    display: inline-flex;
    line-height: 0;
}

#qr-box img    { display: block !important; }
#qr-box canvas { display: none  !important; }

/* Scanner */
#qr-scanner {
    width: 100%;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    background: #000;
    position: relative;
    aspect-ratio: 4/3;
    max-height: 320px;
    display: none;
}

#qr-scanner video  { width: 100%; height: 100%; object-fit: cover; display: block; }
#qr-scanner canvas { display: none; }

.qr-aim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.qr-aim::before {
    content: '';
    width: 48%;
    aspect-ratio: 1;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.4);
    animation: qraim 2s ease-in-out infinite;
}

@keyframes qraim { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.qr-scan-hint {
    position: absolute;
    bottom: 0.65rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255,255,255,.7);
    margin: 0;
}

/* Result */
#qr-result {
    width: 100%;
    display: none;
    margin-top: 0.5rem;
    background: var(--bg2, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 14px);
    padding: 1.25rem;
}

.qr-result-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted, #64748b);
    margin-bottom: 0.65rem;
}

.qr-result-text {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    background: var(--bg3, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.85rem;
    word-break: break-all;
    white-space: pre-wrap;
    min-height: 2.5rem;
    color: var(--text, #0f172a);
}

.qr-result-text a { color: var(--accent, #2563eb); text-decoration: underline; }

.qr-notice {
    font-size: 0.82rem;
    color: var(--muted, #64748b);
    font-family: var(--font-mono, monospace);
    text-align: center;
    display: none;
}