body {
  background: #f6f8fb;
  font-family: 'Segoe UI', sans-serif;
}
.section-title { font-size: 26px; font-weight: 600; margin-bottom: 30px; }
.qr-card { background: white; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: .3s; border: 2px solid transparent; height: 180px; }
.qr-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.qr-card.active { border-color: #2c8ef8; background: #f3f8ff; }
.qr-icon { width: 60px; height: 60px; border-radius: 50%; background: #eef5ff; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #2c8ef8; margin: auto auto 15px; }
.qr-title { font-weight: 600; font-size: 18px; }
.qr-desc { font-size: 13px; color: #777; }
.phone { background: white; border-radius: 30px; padding: 20px; width: 260px; margin: auto; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.qr-preview { background: #f7f7f7; border-radius: 12px; padding: 20px; text-align: center; }
.qr-preview img { width: 150px; }
.preview-text { margin-top: 20px; font-weight: 600; font-size: 18px; }
.qr-preview-container { position: relative; }
.qr-preview.blurred .qr-preview-img-wrap { filter: blur(5px); opacity: 0.7; pointer-events: none; }
.qr-action-overlay { display: none; position: absolute; top:0; left:0; right:0; bottom:0; flex-direction:column; justify-content:center; align-items:center; gap:10px; }
.qr-preview.blurred .qr-action-overlay { display:flex; }
.qr-action-overlay .btn { min-width: 140px; }
#qrList .qr-item { border-radius: 14px; background: #fff; padding: 16px; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
#qrList img { width: 160px; height: 160px; object-fit: contain; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; }
.meta { color: #5b667a; font-size: 13px; }