/* New login design */
body {
    --login-bg: #fbfcfe;
    --login-card-bg: #ffffff;
    --login-border: #d9e2ec;
    --login-primary: #0069d9;
    --login-primary-hover: #005bbf;
    --login-danger: #dc3545;
    --login-text: #1d2d35;
    --login-muted: #5f6e78;
    --login-accent: #e8f2ff;
    background: linear-gradient(180deg,#ffffff 0%, #f3f7fb 100%);
    color: var(--login-text);
}

.login-wrapper {
    min-height: calc(100vh - 160px); /* header+footer space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 22px;
    background: radial-gradient(circle at 20% 20%, #f0f6ff 0%, #ffffff 60%);
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--login-card-bg);
    border: 1px solid var(--login-border);
    border-radius: 20px;
    padding: 40px 44px 46px;
    box-shadow: 0 12px 38px -10px rgba(0,40,90,.18), 0 8px 18px -8px rgba(0,40,90,.08);
    position: relative;
    overflow: hidden;
}

.login-card:before {
    content:'';
    position:absolute;
    top:-48px; right:-48px;
    width:140px; height:140px;
    background: radial-gradient(circle at center, #80c6ff 0%, rgba(128,198,255,0) 72%);
    opacity: .35;
    pointer-events:none;
}

.login-brand { text-align:center; margin-bottom: 28px; }
.login-logo { width:72px; height:72px; object-fit:cover; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.15); margin-bottom:16px; }
.login-brand h1 { font-size: 1.55rem; margin:0; color: var(--login-text); font-weight:600; letter-spacing:.5px; }
.login-subtitle { margin:8px 0 0; font-size:.75rem; letter-spacing:.35px; text-transform:uppercase; color: var(--login-muted); background: var(--login-accent); padding:4px 10px; border-radius:30px; display:inline-block; }

.login-alert {
    background: #fff5f5;
    color:#b30017;
    padding:12px 16px;
    border-radius:12px;
    font-size:.85rem;
    margin-bottom:18px;
    border:1px solid #ffb3be;
    box-shadow:0 2px 6px rgba(255,100,120,.25);
}

.login-already { font-size:.75rem; color: var(--login-muted); text-align:center; margin-bottom:12px; }
.login-already a { color: var(--login-primary); text-decoration:none; }
.login-already a:hover { text-decoration:underline; }

.login-form { display:flex; flex-direction:column; gap:18px; }
.form-group { display:flex; flex-direction:column; }
.form-group label { font-size:.75rem; font-weight:600; letter-spacing:.5px; color: var(--login-muted); margin-bottom:6px; text-transform:uppercase; }

.form-group input {
    border:1px solid var(--login-border);
    border-radius:12px;
    padding:14px 16px;
    font-size:.95rem;
    background:#ffffff;
    color: var(--login-text);
    transition:.18s border-color, .18s box-shadow, .18s background;
}
.form-group input:focus { outline:none; border-color: var(--login-primary); box-shadow:0 0 0 4px rgba(0,105,217,.25); background:#f0f7ff; }

.password-wrapper { position:relative; display:flex; align-items:center; }
.password-wrapper input { width:100%; padding-right:44px; }
.toggle-password {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:#f4f8fb; border:1px solid var(--login-border);
    width:38px; height:38px; border-radius:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; line-height:1; color: var(--login-muted);
    transition:.18s background, .18s color, .18s border-color, .18s box-shadow;
}
.toggle-password:hover { background: var(--login-primary); color:#fff; border-color: var(--login-primary); box-shadow:0 4px 12px -4px rgba(0,105,217,.5); }

.login-submit {
    background: linear-gradient(90deg,#0077ee 0%, #0069d9 100%);
    color:#fff;
    border:none;
    border-radius:16px;
    padding:16px 20px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    margin-top:12px;
    letter-spacing:.55px;
    box-shadow:0 8px 24px -6px rgba(0,105,217,.45);
    transition:.22s background, .22s transform, .22s box-shadow;
}
.login-submit:hover { background: linear-gradient(90deg,#0088ff 0%, #0077ee 100%); box-shadow:0 10px 30px -6px rgba(0,120,230,.55); }
.login-submit:active { transform:translateY(2px); box-shadow:0 5px 14px -4px rgba(0,105,217,.5); }

.login-hint { text-align:center; font-size:.72rem; color: var(--login-muted); margin-top:12px; }

@media (max-width:520px){
    .login-card { padding:26px 24px 34px; border-radius:14px; }
    .login-brand h1 { font-size:1.2rem; }
    .login-logo { width:60px; height:60px; }
}

/* Dark mode (prefers-color-scheme) */
/* Dark mode intentionally disabled to force light theme */