/* 4P3X SafeSpark™ — Offline Handoff Control Demo additive styles */
.handoffControlDemo{border:1px solid rgba(151,255,212,.35);box-shadow:0 0 0 1px rgba(151,255,212,.08),0 24px 80px rgba(0,0,0,.34);background:linear-gradient(180deg,rgba(12,18,27,.96),rgba(8,10,18,.98));}
.handoffControlSteps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;margin:1.1rem 0 1.4rem;}
.handoffControlSteps span{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.65rem .5rem;text-align:center;font-size:.82rem;font-weight:800;background:rgba(255,255,255,.045);color:rgba(255,255,255,.76);}
.handoffControlSteps span.active{background:linear-gradient(135deg,rgba(52,255,209,.92),rgba(150,100,255,.92));color:#05060a;border-color:transparent;box-shadow:0 0 22px rgba(55,255,214,.24);}
.handoffControlGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;margin-top:1rem;align-items:stretch;}
.handoffControlGrid.twoCol{grid-template-columns:1fr 1fr;}
.handoffControlCard{border:1px solid rgba(255,255,255,.13);border-radius:22px;background:rgba(255,255,255,.045);padding:1rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);}
.handoffControlCard h3{margin-top:0;}
.handoffLabel{display:block;margin:.2rem 0 .45rem;font-weight:800;color:#fff;}
.handoffSelect{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#0b1020;color:#fff;padding:.75rem;font:inherit;}
.handoffRolePair,.handoffStatusTiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1rem 0;}
.handoffRolePair div,.handoffStatusTiles div{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:.8rem;background:rgba(0,0,0,.18);}
.handoffRolePair span,.handoffStatusTiles span{display:block;font-size:.78rem;color:rgba(255,255,255,.64);margin-bottom:.25rem;}
.handoffRolePair strong,.handoffStatusTiles strong{display:block;color:#fff;font-size:.96rem;line-height:1.25;word-break:break-word;}
.handoffControlButtons{gap:.55rem;flex-wrap:wrap;}
.handoffQrBox{min-height:172px;border:1px dashed rgba(52,255,209,.42);border-radius:20px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;background:rgba(0,0,0,.2);color:rgba(255,255,255,.72);}
.handoffQrBox.ready{display:grid;place-items:center;gap:.55rem;}
.handoffQrGraphic{width:116px;height:116px;border:8px solid #fff;border-radius:12px;background:
linear-gradient(90deg,#111 10px,transparent 10px 22px,#111 22px 32px,transparent 32px),
linear-gradient(#111 10px,transparent 10px 22px,#111 22px 32px,transparent 32px),#fff;background-size:32px 32px;box-shadow:0 0 20px rgba(52,255,209,.18);}
.handoffImportConfirm{margin-top:.9rem;border-left:4px solid rgba(52,255,209,.8);border-radius:14px;background:rgba(52,255,209,.08);padding:.8rem;}
.handoffImportConfirm.warn{border-left-color:#ffd166;background:rgba(255,209,102,.08);}
.handoffImportConfirm.good{border-left-color:#34ffd1;background:rgba(52,255,209,.1);}
.handoffPackagePreview{max-height:440px;overflow:auto;white-space:pre-wrap;background:#05070d;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1rem;color:#dffdf6;font-size:.82rem;line-height:1.45;}
.handoffAuditTableWrap{overflow:auto;max-height:440px;border-radius:18px;border:1px solid rgba(255,255,255,.12);}
.handoffAuditTable{width:100%;border-collapse:collapse;font-size:.84rem;min-width:620px;}
.handoffAuditTable th,.handoffAuditTable td{border-bottom:1px solid rgba(255,255,255,.08);padding:.65rem;text-align:left;vertical-align:top;}
.handoffAuditTable th{position:sticky;top:0;background:#0c1020;color:#fff;z-index:1;}
.handoffAuditTable td{color:rgba(255,255,255,.8);}
.handoffPayloadCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;margin-top:1rem;}
.handoffPayloadCards article{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:.9rem;background:rgba(255,255,255,.04);}
.handoffPayloadCards h3{font-size:1rem;margin:.1rem 0 .45rem;}
.handoffPayloadCards p{font-size:.9rem;color:rgba(255,255,255,.72);}
@media(max-width:900px){.handoffControlSteps{grid-template-columns:repeat(2,minmax(0,1fr));}.handoffControlGrid,.handoffControlGrid.twoCol,.handoffPayloadCards{grid-template-columns:1fr;}.handoffRolePair,.handoffStatusTiles{grid-template-columns:1fr;}.handoffAuditTable{min-width:560px;}}