/**
 * qr-scanner.css - QR Scanner Dialog Styles
 * 
 * CSP-Safe: External CSS only
 * Uses existing CSS variables from metanet.css
 */

/* ==================== QR Scanner Dialog ==================== */
.qr-scanner-dialog {
    min-width:400px;
    max-width:600px;
}

.qr-video-container {
    position:relative;
    width:100%;
    background:#000;
    border-radius:8px;
    overflow:hidden;
    margin:20px 0;
}

.qr-video {
    width:100%;
    height:auto;
    display:block;
}

.qr-hint {
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin:10px 0;
}

/* ==================== QR Share Dialog ==================== */
.qr-share-dialog {
    min-width:400px;
}

.qr-share-container {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:#fff;
    border-radius:8px;
    margin:20px 0;
}

.qr-share-info {
    text-align:center;
    margin:10px 0;
}

.qr-share-info p {
    margin:5px 0;
    color:var(--muted);
    font-size:13px;
}

.qr-share-link {
    display:block;
    padding:10px;
    background:#0e1530;
    border:1px solid var(--border);
    border-radius:6px;
    font-family:monospace;
    font-size:12px;
    color:var(--accent);
    word-break:break-all;
    margin:10px 0;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    .qr-scanner-dialog,
    .qr-share-dialog {
        min-width:280px;
        max-width:95vw;
    }
    
    .qr-video {
        max-height:400px;
    }
}