:root {
    --brand: #c8412b;
    --brand-dark: #a5341f;
    --brand-soft: rgba(200, 65, 43, 0.1);
}

body {
    font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    background: radial-gradient(circle at 15% 20%, rgba(200, 65, 43, 0.18), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(232, 160, 74, 0.10), transparent 55%),
    linear-gradient(135deg, #1a1410 0%, #2b2320 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    max-width: 430px;
    width: 100%;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), #e8a04a, var(--brand));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.logo-box {
    width: 68px;
    height: 68px;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 8px 20px rgba(200, 65, 43, 0.35);
}

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #2b2320;
}

.form-control {
    height: 50px;
    border-radius: 0.75rem;
    border: 1.5px solid #e8e0da;
    background-color: #faf7f5;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: var(--brand);
    background-color: #fff;
    box-shadow: 0 0 0 0.25rem var(--brand-soft);
}

.form-control.is-invalid {
    border-color: #d93025;
    background-color: #fff5f4;
    background-image: none;
}

.input-group-text {
    background-color: #faf7f5;
    border: 1.5px solid #e8e0da;
    border-radius: 0.75rem;
    color: #8a7d76;
}

.input-group > .form-control:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.input-group > .input-group-text:first-child {
    border-start-end-radius: 0.75rem;
    border-end-end-radius: 0.75rem;
}

.btn-toggle-pass {
    background-color: #faf7f5;
    border: 1.5px solid #e8e0da;
    border-radius: 0.75rem;
    color: #8a7d76;
    cursor: pointer;
    padding: 0 0.9rem;
    transition: all 0.15s ease;
}

.btn-toggle-pass:hover {
    color: var(--brand);
    background-color: var(--brand-soft);
}

.btn-login {
    height: 52px;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(200, 65, 43, 0.35);
    transition: all 0.2s ease;
}

.btn-login:hover:not(:disabled) {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(200, 65, 43, 0.45);
}

.btn-login:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.link-brand {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}

.link-brand:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.25rem var(--brand-soft);
}

.alert-error {
    background-color: #fff5f4;
    border: 1px solid #f5c8c2;
    color: #a5341f;
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.footer-text {
    font-size: 0.8rem;
    color: #8a7d76;
}