/* Devices (Mac side of pairing) */
.dv-scroll { position: absolute; inset: 0; }
.dv-wrap { max-width: 1120px; margin: 0 auto; padding: 84px 40px 56px; }
.dv-hero { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.dv-lede { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.55; }
.dv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dv-col { display: flex; flex-direction: column; gap: 16px; }

.dv-pair { padding: 22px; overflow: hidden; min-height: 520px; display: flex; flex-direction: column;
  background: radial-gradient(90% 70% at 50% 100%, rgba(99,102,241,.12), transparent 60%), var(--e-1); }
.dv-pair-head { display: flex; flex-direction: column; gap: 14px; }
.dv-pair-head .h-sec { font-size: 19px; margin-top: 6px; }
.dv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dv-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-3); }
.dv-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--f-mono); color: var(--t-3); border: 1px solid var(--line-2); }
.dv-steps li.on { color: var(--t-1); } .dv-steps li.on span { color: var(--ink); background: var(--paper); border-color: transparent; }
.dv-steps li.done span { color: var(--green); border-color: var(--green-line); background: var(--green-bg); }

.dv-wait { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin-top: 22px; }
.dv-qr { position: relative; padding: 16px; border-radius: 22px; background: var(--paper); color: #0B0C10; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(99,102,241,.45); }
.dv-qr .orb { position: absolute; left: 50%; top: 50%; margin: -23px 0 0 -23px; box-shadow: 0 0 0 6px var(--paper), 0 0 24px rgba(99,102,241,.5); }
.dv-scanline { position: absolute; left: 12px; right: 12px; height: 2px; top: 16px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(99,102,241,.9), transparent);
  box-shadow: 0 0 12px rgba(99,102,241,.8); animation: dv-scan 2.6s var(--ease-std) infinite; }
@keyframes dv-scan { 0% { top: 16px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 18px); opacity: 0; } }
.dv-code { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dv-code b { font-size: 28px; font-weight: 600; letter-spacing: .08em; color: var(--t-1); }
.dv-exp { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }

.dv-verify, .dv-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; margin-top: 18px; }
.dv-verify .meta, .dv-done .meta { max-width: 380px; line-height: 1.55; margin: 0; }
.dv-pair-link { display: flex; align-items: center; gap: 10px; color: var(--t-2); }
.dv-beam { position: relative; width: 120px; height: 2px; border-radius: 2px; background: rgba(139,131,255,.3); overflow: hidden; }
.dv-beam i { position: absolute; top: 0; bottom: 0; width: 24px; border-radius: 2px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent); animation: dv-beam 1.4s var(--ease-std) infinite; }
.dv-pair-link.on .dv-beam { background: rgba(61,214,140,.35); } .dv-pair-link.on .dv-beam i { background: var(--green); box-shadow: 0 0 10px var(--green); }
@keyframes dv-beam { from { left: -24px; } to { left: 100%; } }
.dv-sas { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 28px; border-radius: 18px; background: rgba(0,0,0,.25); border: 1px solid var(--line-2); }
.dv-sas-num { font-size: 40px; font-weight: 600; letter-spacing: .06em; color: var(--t-1); display: flex; align-items: center; }
.dv-sas-num span { width: 14px; }
.dv-sas-orbs { display: flex; gap: 12px; }
.dv-acts { display: flex; gap: 8px; }

.dv-list, .dv-howcard { padding: 18px 18px 8px; }
.dv-card-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dv-dev { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-1); transition: opacity var(--d-3), transform var(--d-3) var(--ease-out); }
.dv-dev.gone { opacity: .3; transform: translateX(6px); }
.dv-dev-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; color: var(--t-2); background: var(--e-3); }
.dv-dev-ic.on { color: var(--green); background: var(--green-bg); }
.dv-dev-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dv-dev-t { display: flex; align-items: center; gap: 8px; } .dv-dev-t b { font-weight: 600; }
.dv-can { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.dv-how { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-1); }
.dv-how > div { flex: 1; } .dv-how b { font-weight: 600; }
.dv-how-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; color: var(--t-2); background: var(--e-2); border: 1px solid var(--line-1); }
.dv-tog { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--e-4); flex: none; transition: background var(--d-2); }
.dv-tog i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform var(--d-3) var(--ease-spring); }
.dv-tog.on { background: var(--green); } .dv-tog.on i { transform: translateX(16px); }
.dev-row b { color: var(--t-2); }