/* Authentication surface styles */
.auth-surface-dark {
    background: #4a4a4a !important;
    border-radius: 25px !important;
    box-shadow: 8px 8px 16px -2px rgba(0, 0, 0, 0.30), -8px -8px 16px -2px rgba(255, 255, 255, 0.15) !important;
    border: 0 !important;
}
.auth-surface-dark .card-body { color: #e8eef6; }
.auth-surface-dark .text-muted { color: rgba(255,255,255,0.75) !important; }
.auth-surface-dark label.form-label { color: #f5f7fb; }
.auth-surface-dark .form-control {
    background: #4a4a4a;
    border: none;
    color: #f5f7fb;
    border-radius: 16px;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.35), inset -4px -4px 8px rgba(255,255,255,0.08);
    transition: box-shadow .2s ease, background .2s ease;
}
.auth-surface-dark .form-control::placeholder { color: rgba(255,255,255,0.55); }
.auth-surface-dark .form-control:focus {
    background: #4f4f4f;
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.40), inset -5px -5px 10px rgba(255,255,255,0.10), 0 0 0 2px rgba(255,255,255,0.05);
}
.auth-surface-dark .password-addon { color: rgba(255,255,255,0.75) !important; }
.auth-surface-dark .btn-success {
    border: none;
    border-radius: 16px;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.35), -6px -6px 12px rgba(255,255,255,0.10);
    transition: transform .12s ease, box-shadow .2s ease;
}
.auth-surface-dark .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 8px 8px 16px rgba(0,0,0,0.38), -8px -8px 16px rgba(255,255,255,0.12);
}
.auth-surface-dark .btn-success:active { transform: translateY(0); }

/* Light variant - corporate theme */
.auth-surface {
    background: #e9eef9; /* soft blue-ish surface */
    border-radius: 20px;
    box-shadow: -6px -6px 14px 1px rgba(255, 255, 255, 0.75), 6px 6px 14px 1px rgba(27, 47, 89, 0.18);
    border: 0;
}
.auth-surface .card-body { color: #0f172a; }
.auth-surface .text-muted { color: #334155 !important; }
.auth-surface label.form-label { color: #0b1220; }
.auth-surface .form-control {
    background: #e9eef9;
    border: none;
    color: #0f172a;
    border-radius: 16px;
    box-shadow: inset 4px 4px 8px rgba(15,23,42,0.12), inset -4px -4px 8px rgba(255,255,255,0.65);
    transition: box-shadow .2s ease, background .2s ease;
}
.auth-surface .form-control::placeholder { color: #475569; }
.auth-surface .form-control:focus {
    background: #eef2ff;
    box-shadow: inset 5px 5px 10px rgba(15,23,42,0.14), inset -5px -5px 10px rgba(255,255,255,0.8), 0 0 0 2px rgba(59,130,246,0.25);
}
.auth-surface .btn-success {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 6px 6px 12px rgba(27,47,89,0.22), -6px -6px 12px rgba(255,255,255,0.75), inset 0 0 0 rgba(0,0,0,0);
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.auth-surface .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 8px 8px 18px rgba(27,47,89,0.26), -8px -8px 18px rgba(255,255,255,0.8);
    background: linear-gradient(135deg, #93c5fd 0%, #1d4ed8 100%);
}
.auth-surface .btn-success:active {
    transform: translateY(0);
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.18), inset -5px -5px 10px rgba(255,255,255,0.65);
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}