:root { --blue: #3B82F6; --teal: #06B6D4; }
body {
    margin: 0; font-family: "Cairo", sans-serif !important; background: #f7f8fa;
    min-height: 100vh; display: flex; justify-content: center; align-items: center;
}
.reset-card {
    background-color: #F9FAFB; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    width: 100%; max-width: 430px; padding: 2rem; text-align: center;
}
.reset-card h4 { font-weight: bold; margin-bottom: 1rem; color: #333; }
.alert-custom {
    background-color: #fffbe6; border: 1px solid #ffe58f; color: #333; font-size: 0.9rem;
    text-align: right; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.5rem;
}
.form-label { text-align: right; display: block; font-weight: 600; margin-bottom: 0.5rem; color: #333; }
.form-control {
    background: #fff; border-radius: 16px; border: 1.6px solid #E5E7EB; font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; padding: 10px;
}
.form-control:disabled { background: #F3F4F6; color: #6B7280; }
.form-control:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 0 0 rgba(0,0,0,0.15); }
.btn-primary {
    background: linear-gradient(90deg, var(--blue) 0%, var(--teal) 100%); border: none;
    border-radius: 8px; padding: 0.6rem; font-weight: 600; margin-top: 0.5rem; transition: all 0.2s ease;
}
.btn-primary:hover { opacity: 0.9; }
.back-link { display: block; margin-top: 1rem; font-size: 0.9rem; color: #555; text-decoration: none; transition: color 0.2s; }
.back-link:hover { color: var(--blue); }
.muted { color:#6B7280; font-size:.92rem; }
.resend-link { color:#2563EB; text-decoration:none; }
.resend-link[disabled] { pointer-events:none; opacity:.5; }
    @media (max-width: 576px) {
    .reset-card{
        max-width: 340px;
    }
    }
 .cardx{
    background:#F9FAFB; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,0.1);
    width:100%; max-width:430px; padding:2rem; text-align:center;
}
.cardx h4{ font-weight:bold; margin-bottom:1rem; color:#333; }
.hint{
    background:#fffbe6; border:1px solid #ffe58f; color:#333; font-size:.9rem;
    border-radius:8px; padding:.75rem 1rem; margin-bottom:1.25rem; text-align:right;
}
.form-label{ text-align:right; display:block; font-weight:600; margin-bottom:.5rem; color:#333; }
.form-control{
    background:#fff; border-radius:16px; border:1.6px solid #E5E7EB; font-size:.95rem;
    transition:border-color .3s ease, box-shadow .3s ease; padding:10px;
}
.form-control:focus{ outline:none; border-color:var(--blue); box-shadow:inset 0 0 0 rgba(0,0,0,0.15); }
.btn-primary{
    background:linear-gradient(90deg, var(--blue) 0%, var(--teal) 100%); border:none;
    border-radius:8px; padding:.6rem; font-weight:600; margin-top:.5rem; transition:all .2s ease;
}
.btn-primary:hover{ opacity:.9; }
.pw-wrap{ position:relative; }
.toggle-password{
    position:absolute;
    left:10px;
    top:71%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#999;
    font-size:1.1rem;
}
.toggle-password:hover{
    color:var(--blue);
}


.back-link{ display:block; margin-top:1rem; font-size:.9rem; color:#555; text-decoration:none; }
.back-link:hover{ color:var(--blue); }
@media (max-width: 576px) {
    .cardx{
        max-width: 340px;
    }
}