.settings-panel { margin-bottom: 1.2rem; }
.settings-intro { color: #bdd5dc; font-size: 1.3rem; margin: 0 0 1rem; max-width: 52rem; }

.plan-intro { margin: 1rem 0 0; }
.plan-status { margin: .8rem 0 0; font-size: 1.3rem; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }

.account-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: 0; }
.account-details div { padding: .7rem .9rem; border: 2px solid #31546a; background: rgba(7, 23, 36, .55); }
.account-details dt { color: #9db8c2; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; }
.account-details dd { margin: .25rem 0 0; color: #f4f9fa; font-size: 1.6rem; line-height: 1.05; overflow-wrap: anywhere; }

/* A gold pixel key, framed like the sensor badges. */
.key-badge { display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border: 3px solid #ffd166; color: #ffd166; background: #0b1f2b; box-shadow: 2px 2px 0 #071018; }
.key-badge svg { width: 2rem; height: 2rem; fill: currentColor; }
.passkeys-title { display: flex; align-items: center; gap: .7rem; }
.passkeys-title .key-badge { width: 2.4rem; height: 2.4rem; }

.add-passkey { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; padding: 0; font-size: 2.3rem; line-height: 1; box-shadow: 3px 3px 0 #071018; }

.passkey-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.passkey-item { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border: 2px solid #31546a; background: rgba(7, 23, 36, .55); }
.passkey-text { display: grid; gap: .25rem; flex: 1; min-width: 0; }
.passkey-text strong { font-size: 1.7rem; font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
.passkey-meta { color: #9db8c2; font-size: 1.1rem; }
.passkey-item .sensor-remove { font-size: 1.1rem; padding: .25rem .6rem; }
.sign-in-again { margin-top: .4rem; }

@media (max-width: 520px) {
  .passkey-item { flex-wrap: wrap; }
  .passkey-text { flex-basis: calc(100% - 4rem); }
}