.security-wrap{width:100%; max-width:var(--security-card-w); display:flex; flex-direction:column;}

.security-card{width:100%; min-height:var(--security-card-h); position:relative; background:linear-gradient(180deg, var(--surface-panel), var(--surface-panel-low)); border:1px solid var(--line-strong); border-radius:var(--radius-8); padding:var(--space-32) var(--space-32) var(--space-32); box-shadow:var(--shadow-card);}

.badge-key{position:absolute; top:var(--space-24); right:var(--space-24); z-index:2; width:var(--size-44); height:var(--size-44); border-radius:var(--radius-8); display:flex; align-items:center; justify-content:center;
  background:var(--surface-panel-low); border:1px solid var(--line-strong);}
.badge-key svg{width:var(--ic-20); height:var(--ic-20); color:var(--text-dim);}
.badge-key.ok{background:color-mix(in srgb, var(--success) 12%, var(--surface-panel-low)); border-color:color-mix(in srgb, var(--success) 45%, var(--line-strong));}
.badge-key.ok svg{color:var(--success);}

.security-card{--field-gap:var(--space-16); --pw-note-gap:var(--space-16);}

.btn-block{width:100%;}

.under{text-align:center; margin-top:var(--space-20);}
.under .secure{display:inline-flex; align-items:center; gap:var(--space-6); color:var(--text-muted); font-size:var(--fs-body); letter-spacing:.017em;}
.under .secure svg{width:var(--ic-14); height:var(--ic-14);}

.below{text-align:center; font-size:var(--fs-body); color:var(--text); margin:var(--space-40) 0 0;}
.btn-block + .btn-block{margin-top:var(--space-40);}
.below .link{display:inline-block; margin-top:var(--space-6);}

@media (max-width:560px){
  .security-card{padding:var(--space-24) var(--space-20) var(--space-24);}
}

.security-card-head{margin-bottom:var(--space-24);}
.security-card-head .kicker{display:inline-block; font-size:var(--fs-body-sm); font-weight:600; letter-spacing:.127em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-12);}
.security-card-head h1{margin:0 0 var(--space-8); font-size:var(--fs-heading-lg); font-weight:700; letter-spacing:-.015em;}
.security-card-head p{margin:0; color:var(--text); font-size:var(--fs-body);}
.security-card-head p b{color:var(--text); font-weight:600;}

.alert{margin:0 0 var(--space-16); padding:var(--space-10) var(--space-12); border-radius:var(--radius-6); font-size:var(--fs-body);}
.alert-danger{background:color-mix(in srgb,var(--danger) 14%,transparent); border:1px solid color-mix(in srgb,var(--danger) 45%,transparent); color:var(--danger);}
.alert-ok{background:color-mix(in srgb,var(--success) 14%,transparent); border:1px solid color-mix(in srgb,var(--success) 45%,transparent); color:var(--success);}
.alert-notice{background:var(--surface-overlay); border:1px solid var(--surface-overlay); color:var(--text);}

.f-errors{margin:var(--space-6) 0 var(--space-14);}

.link{font-size:var(--fs-body);}

.row-between{display:flex; align-items:center; justify-content:space-between; margin:var(--space-hair) 0 var(--space-20);}
.row-between.is-end{justify-content:flex-end;}

.notice{display:flex; gap:var(--space-10); margin-top:var(--space-16); padding:var(--space-10) var(--space-12); border-radius:var(--radius-6);
  background:color-mix(in srgb, var(--surface-panel-low) 65%, transparent); border:1px solid var(--line);
  font-size:var(--fs-body); color:var(--text);}
.notice svg{width:var(--ic-16); height:var(--ic-16); color:var(--text-muted); flex-shrink:0; margin-top:1px;}
.notice b{color:var(--text); font-weight:600;}

.back{display:flex; align-items:center; justify-content:center; gap:var(--space-8); text-align:center; font-size:var(--fs-body);
  color:var(--text-dim); text-decoration:none; margin-top:var(--space-40);}
.back:hover{color:var(--text);}
.back svg{width:var(--ic-16); height:var(--ic-16);}

.otp-label{display:block; font-size:var(--fs-body); font-weight:600; letter-spacing:.055em; text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--space-10);}
.otp{display:flex; gap:var(--space-8); margin-bottom:var(--space-16);}
.otp input{width:100%; aspect-ratio:3/4; min-width:0; text-align:center; font-size:var(--fs-heading-lg); font-weight:700; color:var(--text);
  background:var(--surface-panel-low); border:1px solid var(--line-strong); border-radius:var(--radius-6); outline:none; font-family:inherit;
  transition:border-color .13s, box-shadow .13s, background .13s;}
.otp input:focus{border-color:var(--text-dim); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);}
.otp input.filled{border-color:var(--text-dim); color:var(--text);}

.btn-row{display:flex; gap:var(--space-10);}
.btn-row > .btn, .btn-row > .btn-primary{flex:1;}

.trusted-opt{display:flex; align-items:center; gap:var(--space-8); margin:0 0 var(--space-16); font-size:var(--fs-body); color:var(--text); cursor:pointer;}

.mfa-steps{list-style:none; margin:0 0 var(--space-16); padding:0; text-align:left; display:grid; gap:var(--space-10);}
.mfa-steps li{display:flex; gap:var(--space-10); font-size:var(--fs-body); color:var(--text); align-items:flex-start;}
.mfa-steps .n{flex:0 0 var(--size-20); height:var(--size-20); border-radius:var(--radius-full); background:var(--text-dim); color:var(--text-on-bright); font-size:var(--fs-body); font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;}

.secret-lead{font-size:var(--fs-body); color:var(--text); margin:0 0 var(--space-6);}
.qr-wrap{display:flex; justify-content:center; margin:var(--space-4) 0 var(--space-14);}
.qr-wrap img{width:var(--qr-size); height:var(--qr-size); background:var(--pure-white); border-radius:var(--radius-8); padding:var(--space-8);}
.secret{font-family:var(--font-mono); font-size:var(--fs-body); letter-spacing:.143em; text-align:center; background:var(--tint-2); border:1px solid var(--tint-4); border-radius:var(--radius-6); padding:var(--space-8) var(--space-10); margin:0 0 var(--space-16); user-select:all;}