/**
 * @license
 * Copyright 2026 Cactusio
 *
 * This code is part of the Cactusio web platform.
 * All rights remain reserved.
 * Unauthorized use, extraction, or redistribution is not permitted.
 *
 * more info at [https://policies.cactusio.com/en/](https://policies.cactusio.com/en/)
 */
.passkey-m3-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;background:linear-gradient(145deg,rgba(26,115,232,.1),rgba(66,133,244,.06));border:1.5px solid rgba(26,115,232,.22);border-radius:28px;cursor:default;transition:.45s cubic-bezier(.34, 1.56, .64, 1);position:relative;overflow:hidden}.passkey-m3-card::before{content:'';position:absolute;top:-40%;right:-20%;width:160px;height:160px;background:rgba(26,115,232,.08);border-radius:50%;filter:blur(24px);pointer-events:none;transition:.5s}.passkey-m3-card:hover{border-color:rgba(26,115,232,.4);background:linear-gradient(145deg,rgba(26,115,232,.14),rgba(66,133,244,.09));transform:translateY(-1px);box-shadow:0 6px 24px rgba(26,115,232,.15)}.passkey-m3-card:hover::before{transform:scale(1.3)}.passkey-m3-icon-ring{width:48px;height:48px;min-width:48px;border-radius:50%;background:linear-gradient(145deg,rgba(26,115,232,.18),rgba(66,133,244,.12));border:1.5px solid rgba(26,115,232,.3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.passkey-m3-icon-ring::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 180deg,rgba(26,115,232,.4) 0deg,rgba(26,115,232,0) 120deg,rgba(26,115,232,0) 240deg,rgba(26,115,232,.4) 360deg);animation:3s linear infinite ringRotate;opacity:.6}@keyframes ringRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.passkey-m3-icon-ring i{font-size:1.3rem;color:#4285f4;position:relative;z-index:1;animation:2.5s ease-in-out infinite fingerprintPulse}@keyframes fingerprintPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}.passkey-m3-body{flex:1;min-width:0}.passkey-m3-title{color:var(--text-light);font-size:.95rem;font-weight:600;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.passkey-m3-subtitle{color:var(--text-gray);font-size:.78rem;line-height:1.4}.passkey-m3-arrow{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(135deg,#1a73e8,#4285f4);border:none;color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.35s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 2px 10px rgba(26,115,232,.35);position:relative;z-index:1}.passkey-m3-arrow:hover{transform:scale(1.12) translateX(2px);box-shadow:0 4px 16px rgba(26,115,232,.5)}.passkey-m3-arrow:active{transform:scale(.95)}.passkey-auth-option{margin-bottom:.5rem;animation:.4s cubic-bezier(.34,1.56,.64,1) passkeySlidIn}@keyframes passkeySlidIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.passkey-use-password-wrap{text-align:center;margin-top:.85rem;margin-bottom:.25rem}.passkey-use-password-link{color:var(--text-gray);font-size:.82rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;transition:color .25s;padding:.4rem .75rem;border-radius:20px;border:1px solid transparent}.passkey-use-password-link:hover{color:var(--primary-color);border-color:rgba(104,190,124,.25);background:rgba(104,190,124,.05)}.passkey-use-password-link i{font-size:.75rem}.passkey-auth-view{display:none;padding:.5rem 0;animation:.4s cubic-bezier(.34,1.56,.64,1) passkeyViewIn}@keyframes passkeyViewIn{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.passkey-back-btn{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-gray);background:0 0;border:none;font-size:.85rem;cursor:pointer;padding:.5rem .75rem;border-radius:20px;transition:.25s;margin-bottom:1.25rem;font-family:inherit}.passkey-back-btn:hover{color:var(--text-light);background:rgba(255,255,255,.07);transform:translateX(-3px)}.passkey-back-btn i{font-size:.8rem}.passkey-view-header{text-align:center;margin-bottom:1.5rem}.passkey-view-icon-wrap{width:72px;height:72px;border-radius:50%;background:linear-gradient(145deg,rgba(26,115,232,.14),rgba(66,133,244,.08));border:2px solid rgba(26,115,232,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;position:relative}.passkey-view-icon-wrap::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(26,115,232,.15);animation:2s ease-in-out infinite ringPulse}@keyframes ringPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.4}}.passkey-view-icon-wrap i{font-size:2rem;color:#4285f4;animation:2.5s ease-in-out infinite fingerprintPulse}.passkey-view-header h3{color:var(--text-light);font-size:1.2rem;margin-bottom:.3rem;font-weight:700}.passkey-view-header p{color:var(--text-gray);font-size:.85rem;line-height:1.5}.passkey-view-device{margin-bottom:.75rem}.passkey-device-primary-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#1a73e8,#4285f4);color:#fff;border:none;border-radius:20px;font-size:1rem;font-weight:600;cursor:pointer;transition:.35s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 4px 16px rgba(26,115,232,.35);font-family:inherit;min-height:52px;position:relative;overflow:hidden}.passkey-device-primary-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .6s}.passkey-device-primary-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,115,232,.45)}.passkey-device-primary-btn:hover::before{left:100%}.passkey-device-primary-btn:active{transform:scale(.98)}.passkey-device-primary-btn:disabled{background:linear-gradient(135deg,#888,#666);cursor:not-allowed;box-shadow:none;transform:none}.passkey-device-primary-btn i{font-size:1.2rem}.passkey-qr-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0 .75rem;color:var(--text-gray);font-size:.78rem}.passkey-qr-divider::after,.passkey-qr-divider::before{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}.passkey-view-qr{margin-bottom:.75rem;animation:.35s qrSlideIn}@keyframes qrSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.qr-code-wrapper{display:flex;align-items:center;justify-content:center;min-height:200px;background:rgba(255,255,255,.03);border:1.5px dashed rgba(255,255,255,.12);border-radius:20px;padding:1.25rem}.passkey-qr-img{width:200px;height:200px;object-fit:contain;border-radius:12px;background:#fff;padding:.75rem;display:block;animation:.4s cubic-bezier(.34,1.56,.64,1) qrAppear}@keyframes qrAppear{from{opacity:0;transform:scale(.85) rotate(-3deg)}to{opacity:1;transform:scale(1) rotate(0)}}.qr-loading-state{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--text-gray);font-size:.85rem}.qr-loading-state i{font-size:1.75rem;color:#1a73e8}.qr-error-state{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--text-gray);font-size:.85rem;text-align:center}.qr-error-state i{font-size:1.75rem;color:#e74c3c}.qr-error-state button{margin-top:.25rem;padding:.4rem 1rem;background:0 0;border:1px solid rgba(26,115,232,.4);border-radius:20px;color:#4285f4;font-size:.82rem;cursor:pointer;font-family:inherit;transition:.25s}.qr-error-state button:hover{background:rgba(26,115,232,.1)}.qr-expire-notice{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.65rem;color:#f39c12;font-size:.78rem;padding:.4rem .75rem;background:rgba(255,193,7,.07);border:1px solid rgba(255,193,7,.2);border-radius:20px}.qr-expire-notice i{font-size:.78rem}.passkey-view-secondary{text-align:center;margin-top:.5rem}.passkey-secondary-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;background:0 0;border:1px solid rgba(255,255,255,.12);border-radius:20px;color:var(--text-gray);font-size:.82rem;cursor:pointer;font-family:inherit;transition:.25s}.passkey-secondary-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--text-light)}.passkey-secondary-btn i{font-size:.82rem}@media (max-width:480px){.passkey-m3-card{padding:.95rem 1rem}.passkey-m3-icon-ring{width:42px;height:42px;min-width:42px}.passkey-m3-icon-ring i{font-size:1.15rem}.passkey-m3-title{font-size:.88rem}.passkey-m3-subtitle{font-size:.73rem}.passkey-m3-arrow{width:36px;height:36px;min-width:36px;font-size:.82rem}.passkey-view-icon-wrap{width:62px;height:62px}.passkey-view-icon-wrap i{font-size:1.65rem}.passkey-device-primary-btn{font-size:.92rem;padding:.9rem 1.25rem;min-height:48px}.passkey-qr-img{width:168px;height:168px}.qr-code-wrapper{min-height:170px;padding:1rem}}body.light-mode .passkey-m3-card{background:linear-gradient(145deg,rgba(26,115,232,.08),rgba(66,133,244,.05));border-color:rgba(26,115,232,.2)}body.light-mode .passkey-m3-card:hover{background:linear-gradient(145deg,rgba(26,115,232,.12),rgba(66,133,244,.08))}body.light-mode .passkey-m3-title{color:#222}body.light-mode .passkey-m3-subtitle{color:#666}body.light-mode .passkey-back-btn{color:#555}body.light-mode .passkey-back-btn:hover{color:#111;background:rgba(0,0,0,.05)}body.light-mode .passkey-view-header h3{color:#111}body.light-mode .passkey-view-header p{color:#555}body.light-mode .qr-code-wrapper{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}body.light-mode .passkey-secondary-btn{color:#555;border-color:rgba(0,0,0,.12)}body.light-mode .passkey-secondary-btn:hover{color:#111;background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.2)}body.light-mode .passkey-use-password-link{color:#666}body.light-mode .passkey-use-password-link:hover{color:var(--primary-color)}body.light-mode .passkey-qr-divider{color:#999}body.light-mode .passkey-qr-divider::after,body.light-mode .passkey-qr-divider::before{background:rgba(0,0,0,.1)}