/* ============================================================
   RELICT AUTH SYSTEM
   Login + MFA
   Requires shared.css
============================================================ */

/* ============================================================
   WRAPPER / CARD
============================================================ */

.form-wrapper{
width:100%;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:var(--bg-primary);
padding:var(--spacing-lg) 20px;
}

.form-card{
width:100%;
max-width:520px;
background:var(--card-bg);
padding:42px 38px;
border-radius:var(--radius-lg);
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
gap:28px;
}

/* ============================================================
   HEADER
============================================================ */

.form-logo{
width:96px;
margin:0 auto;
display:block;
}

.form-title{
text-align:center;
font-size:1.75rem;
font-weight:700;
color:var(--text-primary);
}

.form-subtitle{
text-align:center;
font-size:.95rem;
color:var(--text-muted);
margin-top:-12px;
}

/* ============================================================
   FORM LAYOUT
============================================================ */

form{
display:flex;
flex-direction:column;
gap:24px;
}

.form-field{
display:flex;
flex-direction:column;
gap:8px;
}

.form-field label{
font-size:.95rem;
font-weight:600;
color:var(--text-primary);
}

.form-input{
width:100%;
padding:15px 14px;
background:var(--input-bg);
border:1px solid var(--border);
border-radius:var(--radius-md);
font-size:1rem;
transition:all var(--transition);
}

.form-input:focus{
background:#fff;
border-color:var(--nav-accent);
box-shadow:0 0 0 3px rgba(201,166,58,0.28);
outline:none;
}

/* ============================================================
   PASSWORD TOGGLE
============================================================ */

.password-container{
position:relative;
}

.password-container .form-input{
padding-right:42px;
}

.pw-toggle{
position:absolute;
top:50%;
right:12px;
transform:translateY(-50%);
font-size:20px;
color:var(--text-muted);
cursor:pointer;
user-select:none;
transition:color var(--transition);
}

.pw-toggle:hover{
color:var(--nav-accent);
}

/* ============================================================
   PRIMARY BUTTON
============================================================ */

.form-btn{
width:100%;
padding:15px;
background:var(--nav-accent);
color:#000;
font-size:1.05rem;
font-weight:600;
border:none;
border-radius:var(--radius-md);
cursor:pointer;
transition:background var(--transition),transform .15s;
}

.form-btn:hover{
background:var(--accent-dark);
}

.form-btn:active{
transform:translateY(1px);
}

/* ============================================================
   TEXT LINKS
============================================================ */

.form-link{
font-size:.85rem;
font-weight:600;
color:var(--nav-accent);
text-decoration:none;
text-align:right;
}

.form-link:hover{
text-decoration:underline;
}

/* ============================================================
   STATUS MESSAGES
============================================================ */

.form-message{
padding:12px 14px;
border-radius:var(--radius-sm);
font-size:.9rem;
font-weight:600;
text-align:center;
display:none;
}

.form-message.error{
display:block;
background:#fff5f5;
border:1px solid var(--danger);
color:var(--danger);
}

.form-message.success{
display:block;
background:#f0fdf7;
border:1px solid var(--success);
color:var(--success);
}

/* ============================================================
   MFA CORE LAYOUT
============================================================ */

.mfa-box{
margin-top:20px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
animation:fadeIn .25s ease;
}

.mfa-title{
font-size:1.45rem;
font-weight:700;
color:var(--text-primary);
}

.mfa-desc{
max-width:380px;
font-size:.95rem;
color:var(--text-muted);
line-height:1.45;
}

/* ============================================================
   MFA METHOD SELECTION
============================================================ */

.mfa-methods{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
margin-top:6px;
}

.mfa-method-btn{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px;
min-width:210px;
background:var(--card-bg);
border:1px solid var(--border);
border-radius:var(--radius-md);
font-size:.95rem;
font-weight:600;
color:var(--text-primary);
cursor:pointer;
transition:
border-color var(--transition),
box-shadow var(--transition),
transform .15s,
background var(--transition);
}

.mfa-method-btn i{
font-size:18px;
color:var(--nav-accent);
flex-shrink:0;
}

.mfa-method-btn:hover{
border-color:var(--nav-accent);
box-shadow:0 0 0 3px rgba(201,166,58,0.18);
transform:translateY(-1px);
}

.mfa-method-btn:active{
transform:translateY(0);
}

.mfa-method-btn.selected{
border-color:var(--nav-accent);
background:rgba(201,166,58,0.08);
box-shadow:0 0 0 3px rgba(201,166,58,0.25);
}

.mfa-method-btn.selected i{
color:var(--accent-dark);
}

/* ============================================================
   MFA CODE ENTRY
============================================================ */

.mfa-input{
width:100%;
max-width:260px;
text-align:center;
letter-spacing:6px;
font-size:1.25rem;
padding:14px;
}

.mfa-actions{
width:100%;
max-width:260px;
display:flex;
flex-direction:column;
gap:12px;
margin-top:4px;
}

.mfa-back{
background:none;
border:none;
font-size:.85rem;
font-weight:600;
color:var(--nav-accent);
cursor:pointer;
padding:6px 0;
}

.mfa-back:hover{
text-decoration:underline;
}

/* ============================================================
   PASSWORD STRENGTH (OPTIONAL)
============================================================ */

.password-strength{
width:100%;
height:6px;
background:var(--surface-2);
border-radius:var(--radius-sm);
overflow:hidden;
margin-top:8px;
}

.password-strength .strength-bar{
height:100%;
width:0;
transition:width .3s,background .3s;
}

.pw-checklist{
list-style:none;
padding:0;
margin-top:12px;
font-size:.85rem;
color:var(--text-muted);
}

.pw-checklist li{
margin:4px 0;
}

.pw-checklist li.valid{
color:var(--success);
font-weight:600;
}

.pw-checklist li.invalid{
color:var(--danger);
}

/* ============================================================
   UTILITIES
============================================================ */

.hidden{
display:none;
}

/* ============================================================
   ANIMATION
============================================================ */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(6px);
}
to{
opacity:1;
transform:translateY(0);
}
}