/* Rande ID — chaves de acesso (RDS 2.3, modo Operate: sólido, sem animação contínua).
   ÚNICA folha de estilo das chaves: login, cadastro, aparelho novo e painel da conta.
   Marcação e textos: vertice/passkey-ui.js. Para restilizar, comece pelos tokens abaixo.
   Mapa de classes:
   .passkey-hero/.passkey-hero-frame (ilustração; estados .is-idle .is-waiting .is-done)
   .passkey-points (benefícios) · .passkey-created (chave salva) · .passkey-unsupported (sem suporte)
   .passkey-status (aguardando) · .passkey-account (conta) · .passkey-button (botão do login)
   .passkey-3d (chave 3D viva) · .pk-list/.pk-item/.pk-icon/.pk-meta/.pk-badge/.pk-chevron/.pk-empty (lista do painel)
   .pk-detail/.pk-detail-hero/.pk-detail-name/.pk-detail-actions/.pk-facts (tela de uma chave) */
:root{
 /* Ilustração */
 --pk-hero-size:76px;--pk-hero-radius:10px;--pk-hero-inner-inset:7px;--pk-hero-inner-radius:4px;
 --pk-hero-bg:linear-gradient(180deg,#1F2226 0%,#17191C 100%);--pk-hero-border:var(--v-stroke);--pk-hero-ink:var(--v-text);
 /* Cartões e listas */
 --pk-card-radius:10px;--pk-card-bg:var(--v-surface);--pk-card-line:var(--v-soft-line);
 --pk-tile-size:36px;--pk-tile-radius:6px;--pk-tile-bg:var(--v-raised);
 /* Botões */
 --pk-button-height:48px;--pk-button-radius:8px;
 /* Chave 3D (vertice/key3d): altura nas telas de login/cadastro e no detalhe da conta */
 --pk-3d-height:150px;--pk-3d-detail:300px;--pk-thumb-w:76px;--pk-thumb-h:42px;
 /* Movimento */
 --pk-enter:240ms;--pk-stagger:40ms;
 /* Estados (cobalt = aguardando, emerald = salva, amber = sem suporte) */
 --pk-cobalt-line:rgba(86,153,248,.55);--pk-cobalt-wash:rgba(86,153,248,.08);
 --pk-emerald-line:rgba(68,200,154,.5);--pk-emerald-wash:rgba(68,200,154,.08);
 --pk-amber-line:rgba(241,183,94,.45);--pk-amber-wash:rgba(241,183,94,.08);
 --pk-highlight:inset 0 1px 0 rgba(255,255,255,.06);--pk-keyedge:inset 0 -1px 0 rgba(0,0,0,.45);
}

/* Botão secundário do login: mesmo peso do Google, ícone de chave. */
.passkey-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;
 border-radius:var(--pk-button-radius);border:1px solid var(--v-stroke);background:var(--v-surface);color:var(--v-text);
 font:600 14px/1.2 var(--v-ui);letter-spacing:-.01em;cursor:pointer;box-shadow:var(--pk-highlight),var(--pk-keyedge)}
.passkey-button svg{flex:none;color:var(--v-muted)}
@media (hover:hover) and (pointer:fine){.passkey-button:hover{background:var(--v-raised);border-color:#3B4048}}
.passkey-button:active{transform:translateY(1px)}
.passkey-button:disabled{opacity:.55}

/* Aviso discreto "sem senha" no login e no cadastro. */
.login-passwordless-note{display:flex;gap:9px;align-items:flex-start;margin:2px 0 0;color:var(--v-low);font:450 13px/1.5 var(--v-ui)}
.login-passwordless-note svg{flex:none;margin-top:2px;color:var(--v-muted)}

/* Telas de chave de acesso */
.passkey-screen{gap:16px}
.passkey-hero{display:flex;justify-content:flex-start;margin:4px 0 2px}
.passkey-hero-frame{position:relative;display:grid;place-items:center;width:var(--pk-hero-size);height:var(--pk-hero-size);border-radius:var(--pk-hero-radius);
 color:var(--pk-hero-ink);background:var(--pk-hero-bg);border:1px solid var(--pk-hero-border);
 box-shadow:var(--pk-highlight),var(--pk-keyedge),0 10px 24px -14px rgba(0,0,0,.7);
 transition:border-color 160ms var(--v-curve),background-color 160ms var(--v-curve),color 160ms var(--v-curve)}
/* Moldura interna concêntrica (raio interno = externo − espaçamento). */
.passkey-hero-frame::before{content:"";position:absolute;inset:var(--pk-hero-inner-inset);border-radius:var(--pk-hero-inner-radius);border:1px solid var(--v-soft-line);pointer-events:none}
.passkey-hero.is-waiting .passkey-hero-frame{border-color:var(--pk-cobalt-line);background:var(--v-surface);box-shadow:var(--pk-highlight),0 0 0 4px var(--pk-cobalt-wash)}
.passkey-hero.is-waiting .passkey-hero-frame::before{border-color:rgba(86,153,248,.22)}
.passkey-hero.is-done .passkey-hero-frame{color:var(--v-emerald);border-color:var(--pk-emerald-line);box-shadow:var(--pk-highlight),0 0 0 4px var(--pk-emerald-wash)}
@media (prefers-reduced-motion:no-preference){
 .passkey-screen .passkey-hero{animation:pk-settle var(--pk-enter) var(--v-curve) both}
 .passkey-screen .passkey-points li,.passkey-screen .passkey-created{animation:pk-settle 260ms var(--v-curve) both}
 .passkey-screen .passkey-points li:nth-child(2){animation-delay:var(--pk-stagger)}
 .passkey-screen .passkey-points li:nth-child(3){animation-delay:calc(var(--pk-stagger) * 2)}
}
@keyframes pk-settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.passkey-points{list-style:none;margin:0;padding:0;display:grid;gap:2px;border:1px solid var(--pk-card-line);border-radius:var(--pk-card-radius);
 background:var(--pk-card-bg);box-shadow:var(--pk-highlight);overflow:hidden}
.passkey-points li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px}
.passkey-points li+li{border-top:1px solid var(--v-soft-line)}
.passkey-points svg{flex:none;width:var(--pk-tile-size);height:var(--pk-tile-size);padding:8px;border-radius:var(--pk-tile-radius);background:var(--pk-tile-bg);
 border:1px solid var(--v-stroke);color:var(--v-text);box-sizing:border-box}
.passkey-points span{display:grid;gap:2px;min-width:0}
.passkey-points strong{font:600 14px/1.35 var(--v-ui);color:var(--v-text);letter-spacing:-.01em}
.passkey-points small{font:450 13px/1.45 var(--v-ui);color:var(--v-low)}

.passkey-account{display:flex;align-items:center;gap:8px;margin:0;color:var(--v-muted);font:500 14px/1.4 var(--v-ui);overflow-wrap:anywhere}
.passkey-account svg{flex:none;color:var(--v-low)}
.passkey-status:not([hidden]){display:flex;align-items:center;gap:10px;margin:0;color:var(--v-muted);font:500 14px/1.45 var(--v-ui)}
.passkey-created{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;border:1px solid var(--pk-emerald-line);
 background:var(--pk-emerald-wash);color:var(--v-text)}
.passkey-created>svg{flex:none;color:var(--v-emerald)}
.passkey-created span{display:grid;gap:2px}
.passkey-created strong{font:600 14px/1.35 var(--v-ui)}
.passkey-created small{font:450 13px/1.4 var(--v-ui);color:var(--v-muted)}
.passkey-unsupported{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:10px;
 border:1px solid var(--pk-amber-line);background:var(--pk-amber-wash);color:var(--v-text);font:450 14px/1.5 var(--v-ui)}
.passkey-unsupported svg{flex:none;margin-top:2px;color:var(--v-amber)}
.otp-switch{align-self:flex-start;margin-top:2px}

/* Login: três botões com a mesma altura. Desktop: Continuar em toda a largura;
   chave de acesso e Google lado a lado, com a mesma largura, logo abaixo. */
#app .auth-card>.bottom-actions.login-actions>.btn,
#app .auth-card>.bottom-actions.login-actions>.passkey-button,
#app .auth-card>.bottom-actions.login-actions>.google-button{min-height:var(--pk-button-height)!important;height:var(--pk-button-height)!important;padding-block:0!important;white-space:nowrap;box-sizing:border-box}
@media (min-width:900px){
 #app .auth-card>.bottom-actions.login-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
 #app .auth-card>.bottom-actions.login-actions>.btn{grid-column:1/-1!important;grid-row:1!important;width:100%!important;min-width:0!important;justify-self:stretch!important}
 #app .auth-card>.bottom-actions.login-actions>.passkey-button{grid-column:1!important;grid-row:2!important;width:100%!important}
 #app .auth-card>.bottom-actions.login-actions>.google-button{grid-column:2!important;grid-row:2!important;width:100%!important;min-width:0!important}
 #app .auth-card>.bottom-actions.login-actions>.login-signup{grid-column:1/-1!important;grid-row:3!important;justify-content:flex-end!important}
}
/* Celular: nas telas de chave, ação principal em largura total e alternativa abaixo. */
@media (max-width:899px){
 #app .auth-card.screen-passkey>.bottom-actions,#app .auth-card.screen-passkey-create>.bottom-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important}
 #app .auth-card.screen-passkey>.bottom-actions>.btn,#app .auth-card.screen-passkey-create>.bottom-actions>.btn{width:100%!important;flex:none!important}
 #app .auth-card.screen-passkey>.bottom-actions>.text-button,#app .auth-card.screen-passkey-create>.bottom-actions>.text-button{min-height:44px;align-self:center}
 .passkey-hero{justify-content:center}
 .passkey-account{justify-content:center}
}

/* Painel da conta: lista de chaves (segue as variáveis da conta, incluindo o tema claro). */
.pk-list{display:grid;margin:14px 0 4px;border-top:1px solid var(--line,#24272C)}
.pk-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line,#24272C)}
.pk-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--raised,#1D1F23);border:1px solid var(--line,#30343A);color:var(--text,#F5F7FA);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pk-icon svg{width:19px;height:19px}
.pk-meta{display:grid;gap:3px;min-width:0}
.pk-meta strong{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 14px/1.35 var(--v-ui);color:var(--text,#F5F7FA);overflow-wrap:anywhere}
.pk-meta small{font:450 12px/1.45 var(--v-ui);color:var(--dim,#929CA8)}
.pk-meta .pk-dates{font-family:var(--v-mono);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:-.02em}
.pk-badge{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:4px;border:1px solid rgba(86,153,248,.45);color:#8CBBFA;font:600 11px/1 var(--v-ui);letter-spacing:0}
html[data-theme='light'] .pk-badge{color:#1660C8;border-color:rgba(22,96,200,.4)}
.pk-empty{display:grid;gap:4px;margin:0;padding:16px 0;color:var(--dim,#929CA8);font:450 13px/1.5 var(--v-ui)}
.pk-empty strong{color:var(--text,#F5F7FA);font-weight:600;font-size:14px}
.pk-rename{display:grid;gap:8px}
.pk-rename input{width:100%;min-height:44px;padding:0 12px;border-radius:6px;border:1px solid var(--line,#30343A);background:var(--bg,#0B0B0C);color:var(--text,#F5F7FA);font:500 16px/1 var(--v-ui)}
.pk-rename-actions{display:flex;gap:8px}
.pk-rename-actions .primary{width:auto!important;min-height:40px!important;margin:0!important;padding:0 16px;border-radius:8px!important}
#passkey-add.is-working{opacity:.7}

/* ---------- Chave 3D ---------- */
.passkey-hero.has-3d{display:block;height:var(--pk-3d-height);margin:-8px -6px -4px}
.passkey-hero.has-3d .passkey-hero-frame{display:none}
.passkey-3d,.passkey-3d canvas{display:block;width:100%;height:100%}
.passkey-3d canvas{touch-action:pan-y;cursor:grab}
@media (min-width:900px){:root{--pk-3d-height:190px}}
/* Lista do painel: a linha inteira é um botão que abre a tela da chave (seta à direita). */
.pk-item{position:relative;width:100%;grid-template-columns:var(--pk-thumb-w) minmax(0,1fr) 24px;padding:12px 6px;margin:0;border:0;border-bottom:1px solid var(--line,#24272C);
 border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color 140ms var(--v-curve)}
@media (hover:hover) and (pointer:fine){.pk-item:hover{background:color-mix(in srgb,var(--raised,#1D1F23) 70%,transparent)}}
.pk-item:active{background:var(--raised,#1D1F23)}
.pk-icon{width:var(--pk-thumb-w);height:var(--pk-thumb-h)}
.pk-icon.has-thumb{background:none;border:0;box-shadow:none}
.pk-icon img{display:block;width:100%;height:100%;object-fit:contain}
.pk-chevron{display:grid;place-items:center;color:var(--dim,#929CA8)}
/* A página da conta estiliza button genericamente: reforça a grade da linha. */
#passkeys-list .pk-item{display:grid!important;align-items:center;gap:12px;min-height:0;height:auto;box-shadow:none}
#passkeys-list .pk-icon{overflow:hidden}
#passkeys-list .pk-icon img{max-width:var(--pk-thumb-w);max-height:var(--pk-thumb-h)}
@media (max-width:420px){.pk-item{grid-template-columns:var(--pk-thumb-w) minmax(0,1fr) 20px}}
/* Detalhe de uma chave */
.pk-detail{display:grid;gap:16px}
.pk-detail-hero{height:var(--pk-3d-detail);border-radius:10px;border:1px solid var(--line,#24272C);overflow:hidden;
 background:radial-gradient(120% 90% at 28% 18%,var(--raised,#1E2126) 0%,var(--bg,#0B0B0C) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pk-detail-hero.has-3d{margin:0}
.pk-detail-name{display:grid;gap:6px}
.pk-detail-name label{font:600 13px/1.3 var(--v-ui);color:var(--muted,#B8C2CE)}
.pk-detail-row{display:flex;gap:8px}
.pk-detail-row input{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:6px;border:1px solid var(--line,#30343A);background:var(--bg,#0B0B0C);color:var(--text,#F5F7FA);font:500 16px/1 var(--v-ui)}
.pk-detail-row .subtle-button{min-height:44px;padding:0 16px;border-radius:8px}
.pk-facts{display:grid;border-top:1px solid var(--line,#24272C)}
.pk-fact{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line,#24272C);font-size:14px}
.pk-fact span{color:var(--dim,#929CA8)}
.pk-fact strong{font-weight:600;text-align:right;overflow-wrap:anywhere}
.pk-detail-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pk-detail-actions .subtle-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;font-size:13px}
.pk-detail-actions .subtle-button svg{width:16px;height:16px}
.pk-test-result{font:500 13px/1.4 var(--v-ui);color:var(--dim,#929CA8)}
.pk-test-result.is-ok{color:var(--account-success-text,#44C89A)}
.pk-test-result.is-error{color:var(--account-danger-text,#F1787F)}

/* ---------- Chaves no painel da conta: lista de cards em linha ----------
   .pk-grid (lista com chaves) > .pk-card (largura total, altura fixa) > .pk-card-art (SVG de key3d/key-art.js)
   + .pk-card-text (nome, tipo só se renomeada, .pk-sync) + .pk-chevron */
:root{--pk-row-h:92px;--pk-art-w:132px;--pk-row-gap:10px}
#passkeys-list.pk-grid{display:flex;flex-direction:column;gap:var(--pk-row-gap);border-top:0;margin:14px 0 6px}
#passkeys-list .pk-card{display:grid!important;grid-template-columns:var(--pk-art-w) minmax(0,1fr) 20px;align-items:center;gap:14px;width:100%;
 height:var(--pk-row-h)!important;min-height:0;margin:0;padding:8px 12px 8px 8px;
 border:1px solid var(--line,#2A2D31);border-radius:var(--pk-card-radius);background:var(--surface,#151618);color:var(--text,#F5F7FA);font:inherit;text-align:left;cursor:pointer;
 box-shadow:var(--pk-highlight);transition:background-color 140ms var(--v-curve),border-color 140ms var(--v-curve),transform 140ms var(--v-curve)}
@media (hover:hover) and (pointer:fine){#passkeys-list .pk-card:hover{background:var(--raised,#1D1F23);border-color:#3B4048}#passkeys-list .pk-card:hover .pk-art{transform:translateX(2px) rotate(-2deg)}}
#passkeys-list .pk-card:active{transform:scale(.99)}
#passkeys-list .pk-card:focus-visible{outline:2px solid var(--v-cobalt,#5699F8);outline-offset:2px}
.pk-card-art{display:grid;place-items:center;height:100%;border-radius:6px;color:var(--dim,#929CA8);
 background:radial-gradient(120% 100% at 30% 15%,var(--raised,#1E2126) 0%,var(--bg,#0B0B0C) 100%);border:1px solid var(--line,#24272C);overflow:hidden}
.pk-art{display:block;width:100%;height:100%;padding:4px 8px;transition:transform 240ms var(--v-curve)}
.pk-card-text{display:grid;gap:3px;min-width:0;align-content:center}
.pk-card-text strong{font:600 14.5px/1.3 var(--v-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-card-text small{font:450 12px/1.35 var(--v-ui);color:var(--dim,#929CA8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-sync{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;color:var(--dim,#929CA8);font:500 12px/1.3 var(--v-ui)}
.pk-sync svg{flex:none;width:14px;height:14px}
.pk-sync>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-sync.is-synced{color:var(--account-success-text,#44C89A)}
html[data-theme='light'] .pk-card-art{background:radial-gradient(120% 100% at 30% 15%,#FFFFFF 0%,#EEF0F3 100%)}
@media (max-width:420px){:root{--pk-row-h:80px;--pk-art-w:104px}#passkeys-list .pk-card{gap:12px}}
@media (prefers-reduced-motion:reduce){#passkeys-list .pk-card,.pk-art{transition:none}}

/* Tela da chave: selo de sincronização sob o título; um toque explica o que significa. */
.pk-detail-head{display:grid;gap:8px;justify-items:start;min-width:0}
.pk-detail-head h1{overflow-wrap:anywhere}
.pk-sync-badge{display:inline-flex!important;align-items:center;gap:6px;width:auto!important;min-height:30px!important;height:auto!important;margin:0!important;padding:0 10px!important;
 border-radius:999px!important;border:1px solid var(--line,#2A2D31)!important;background:var(--surface,#151618)!important;color:var(--dim,#929CA8)!important;font:500 12.5px/1 var(--v-ui)!important;cursor:pointer;box-shadow:none!important}
.pk-sync-badge .pk-sync{color:inherit}
.pk-sync-badge.is-synced{color:var(--account-success-text,#44C89A)!important;border-color:color-mix(in srgb,var(--account-success-text,#44C89A) 40%,transparent)!important}
.pk-sync-badge .pk-sync-more{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font:600 9px/1 var(--v-ui);opacity:.8}
.pk-sync-note{max-width:52ch;margin:0!important;color:var(--dim,#929CA8)!important;font:450 13px/1.5 var(--v-ui)!important}
.pk-detail-head .pk-sync-note:not([hidden]){display:block!important}
.pk-detail-head .pk-sync-badge[hidden],.pk-detail-head .pk-sync-note[hidden]{display:none!important}
/* Remoção: a chave sai da moldura (vira estilhaços sobre a página). */
.pk-detail-hero.is-shattering{background:transparent;border-color:transparent;box-shadow:none}

/* Renomear: campo e "Salvar" com a mesma altura (a conta estiliza button e input genericamente). */
.pk-detail-row{align-items:stretch}
.pk-detail-row input,.pk-detail-row .subtle-button{box-sizing:border-box;height:var(--pk-button-height)!important;min-height:0!important;margin:0!important}
.pk-detail-row .subtle-button{flex:none;display:inline-flex;align-items:center;justify-content:center}
/* Chave 3D: o arraste gira a peça (sem rolar a página nem selecionar no toque longo). */
.passkey-3d canvas,.pk-detail-hero canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}

/* Tela da chave compacta: tudo cabe na tela sem rolar (3D encolhe com a altura da janela). */
:root{--pk-3d-detail:clamp(150px,calc(100svh - 560px),300px)}
@media (min-width:900px){:root{--pk-3d-detail:clamp(170px,calc(100svh - 520px),320px)}}
.pk-detail{gap:12px}
.pk-detail-name{gap:4px}
.pk-facts-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 16px;border-top:1px solid var(--line,#24272C)}
.pk-facts-grid .pk-fact{display:grid;gap:2px;justify-content:stretch;padding:8px 0;font-size:13px}
.pk-facts-grid .pk-fact strong{text-align:left;font-size:13px}
.pk-facts-grid .pk-fact span{font-size:12px}
.pk-detail-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.pk-detail-buttons button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:100%!important;height:var(--pk-button-height)!important;min-height:0!important;margin:0!important;padding:0 14px!important;border-radius:8px!important;font-size:14px!important}
.pk-detail-buttons svg{width:16px;height:16px}
.pk-detail>.pk-test-result{margin:-4px 0 0;min-height:0}
.pk-detail>.pk-test-result:empty{display:none}