/* security feature styles. Loaded after styles.css. */

/* Continue with Google / Apple (sign-in modal) */
.oauth-block{display:grid;gap:10px;margin-top:16px}
.oauth-divider{display:flex;align-items:center;gap:12px;color:#92a0a5;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.oauth-divider::before,.oauth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;transition:background .15s}
.oauth-btn:active{transform:scale(.99)}
.oauth-google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.oauth-google:hover{background:#f6f8fc}
.oauth-apple{background:#000;color:#fff;border:1px solid #000}
.oauth-apple:hover{background:#1d1d1f}
.oauth-logo{flex:none;display:block}

/* Two-step sign-in */
.tf-code{font-variant-numeric:tabular-nums;letter-spacing:.18em;font-size:16px}
.tf-code::placeholder{letter-spacing:normal}
.tf-body p:last-child{margin-bottom:0}
.tf-inline{margin-top:14px}
.tf-row{display:flex;gap:9px;align-items:stretch}
.tf-row .field{flex:1;min-width:0}
.tf-row .btn{flex:none}
.tf-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.tf-actions .tf-inline{margin-top:0}
.tf-danger{color:#a63b42;border-color:#e9cacc}
.tf-warn{color:#9c6414;font-weight:700}
.tf-steps{margin:12px 0 16px;padding-left:20px;color:#526772;font-size:13px;line-height:1.6}
.tf-setup{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--off)}
.tf-qr{width:184px;height:184px;background:#fff;border-radius:8px;padding:6px;flex:none}
.tf-key{flex:1;min-width:200px}
.tf-key p{margin-bottom:8px}
.tf-secret{display:block;font:700 15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;word-break:break-all;background:#fff;border:1px dashed #c8d6d6;border-radius:9px;padding:10px 12px;margin-bottom:10px;user-select:all}
.tf-open-app{display:none}
@media (pointer:coarse){.tf-open-app{display:inline-flex}}
.tf-codes{border:1px solid #f1dfbd;background:#fffaf0;border-radius:14px;padding:16px}
.tf-code-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tf-code-list code{display:block;text-align:center;font:700 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 6px;user-select:all}

/* Sign-in methods */
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.sec-row:first-of-type{border-top:0}
.sec-method{display:flex;align-items:center;gap:11px;font-weight:800;min-width:0}
.sec-method>span{display:flex;flex-direction:column;min-width:0}
.sec-method small{font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-method .oauth-logo{color:#000}
.sec-note{display:flex;gap:8px;align-items:flex-start;background:#fbeaec;color:#8a3238;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600}
.sec-note svg{flex:none;margin-top:2px}

@media (max-width:640px){
 .tf-actions{grid-template-columns:1fr}
 .tf-row{flex-direction:column}
 .tf-setup{justify-content:center}
 .tf-key{min-width:0;width:100%}
 .sec-row{flex-wrap:wrap}
}