/* 实名认证卡片（照搬 rust-certify-demo，命名空间 .rn-demo 避免与控制台样式冲突） */
.rn-demo { --primary:#006eff; --primary-hover:#005ce0; --bg:#f5f7fa; --text:#1f2329; --text-sub:#646a73; --border:#e5e8ec; --success:#00a870; --warn:#d54941; }
.rn-demo * { box-sizing:border-box; }
.rn-demo .tabs { display:flex; gap:8px; margin-bottom:20px; }
.rn-demo .tab { flex:1; padding:10px 0; text-align:center; border-radius:10px; border:1px solid var(--border); background:var(--bg); font-size:14px; cursor:pointer; color:var(--text-sub); user-select:none; }
.rn-demo .tab.active { background:#e8f1ff; border-color:var(--primary); color:var(--primary); font-weight:600; }
.rn-demo .field { margin-bottom:16px; }
.rn-demo .field label { display:block; font-size:13px; color:var(--text-sub); margin-bottom:6px; }
.rn-demo .field input, .rn-demo .field select { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; background:#fff; color:var(--text); }
.rn-demo .field input:focus, .rn-demo .field select:focus { border-color:var(--primary); }
.rn-demo .btn { width:100%; padding:12px 0; border:0; border-radius:8px; background:var(--primary); color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s; }
.rn-demo .btn:hover { background:var(--primary-hover); }
.rn-demo .btn:disabled { opacity:.55; cursor:not-allowed; }
.rn-demo .btn.ghost { background:#fff; border:1px solid var(--primary); color:var(--primary); margin-top:10px; }
.rn-demo .btn.ghost:hover { background:#e8f1ff; }
.rn-demo .result { display:none; text-align:center; margin-top:8px; }
.rn-demo .result.show { display:block; }
.rn-demo .qr-box { display:inline-block; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fff; margin:6px 0 14px; }
.rn-demo .qr-box img { display:block; width:220px; height:220px; }
.rn-demo .status-tip { font-size:14px; color:var(--text-sub); margin-top:12px; }
.rn-demo .status-tip .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary); margin-right:6px; vertical-align:middle; animation:pulse 1.2s infinite; }
.rn-demo .status-tip.ok .dot { background:var(--success); animation:none; }
.rn-demo .status-tip.ok { color:var(--success); font-weight:600; }
.rn-demo .status-tip.fail .dot { background:var(--warn); animation:none; }
.rn-demo .status-tip.fail { color:var(--warn); font-weight:600; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.rn-demo .certify-id { font-size:12px; color:#8f959e; margin-top:10px; word-break:break-all; }
.rn-demo .rn-upload { flex:1; height:130px; border:2px dashed var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; background:#fafbfc; position:relative; transition:border-color .15s; }
.rn-demo .rn-upload:hover, .rn-demo .rn-upload.has { border-color:var(--primary); }
.rn-demo .rn-ph { text-align:center; font-size:13px; color:var(--text-sub); line-height:1.9; pointer-events:none; }
.rn-demo .rn-ph small { font-size:11px; color:#8f959e; }
.rn-demo .rn-thumb { position:absolute; inset:0; }
.rn-demo .rn-thumb img { width:100%; height:100%; object-fit:cover; }