@import url('https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,600,700,800');

:root {
    --vs-bg: #0a0d1a;
    --vs-bg-alt: #10142a;
    --vs-card: #161b34;
    --vs-border: rgba(255,255,255,0.08);
    --vs-primary: #7c5cff;
    --vs-accent: #22d3ee;
    --vs-text: #e8eaf3;
    --vs-muted: #8891ab;
}

body.login-page {
    background:
        radial-gradient(600px circle at 15% 20%, rgba(124,92,255,0.25), transparent 60%),
        radial-gradient(500px circle at 85% 80%, rgba(34,211,238,0.18), transparent 60%),
        var(--vs-bg) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.login-box { width: 100%; max-width: 400px; margin: 40px auto; }

.login-logo {
    text-align: center; margin-bottom: 22px;
}
.login-logo a {
    color: #fff !important; font-weight: 800; font-size: 24px; letter-spacing: 0.5px;
}

.login-box-body {
    background: var(--vs-card) !important;
    border: 1px solid var(--vs-border);
    border-radius: 20px;
    padding: 34px 30px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
    color: var(--vs-text) !important;
}

.login-box-msg {
    color: var(--vs-muted) !important;
    text-align: center;
    margin-bottom: 22px;
    font-size: 14px;
}

.login-box-body .form-control {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--vs-border) !important;
    color: var(--vs-text) !important;
    border-radius: 10px !important;
    height: 44px;
    padding: 10px 14px;
}
.login-box-body .form-control:focus {
    border-color: var(--vs-accent) !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.06) !important;
}
.login-box-body .form-control::placeholder { color: var(--vs-muted); }
.login-box-body label { color: var(--vs-muted) !important; font-size: 13px; font-weight: 600; }

.login-box-body .has-feedback .form-control-feedback {
    color: var(--vs-muted) !important;
    top: 10px;
}

.login-box-body .btn-primary,
.login-box-body .btn-block {
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 11px !important;
    height: auto !important;
}

.login-box-body a { color: var(--vs-accent) !important; text-decoration: none; }
.login-box-body a:hover { color: #fff !important; }

.login-box-body .checkbox label,
.login-box-body p { color: var(--vs-muted) !important; font-size: 13px; }
.login-box-body .checkbox input[type="checkbox"] { margin-top: 3px; }

.login-box-body hr,
.login-box-body .divider { border-color: var(--vs-border) !important; color: var(--vs-muted); }

/* Flash / alert messages on auth pages */
.login-box .message,
.login-box .alert {
    border-radius: 10px !important;
    border: 1px solid var(--vs-border) !important;
    margin-bottom: 16px;
}
.login-box .alert-danger,
.login-box .message.error { background: rgba(248,113,113,0.1) !important; color: #f87171 !important; }
.login-box .alert-success,
.login-box .message.success { background: rgba(52,211,153,0.1) !important; color: #34d399 !important; }

footer { padding: 20px 0; color: var(--vs-muted); font-size: 12px; text-align: center; }