/* Premium login page */
body.login-body {
    margin: 0; min-height: 100vh;
    background: linear-gradient(135deg, #054b2c 0%, #0a6b3f 35%, #1c5e9a 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; position: relative; overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
}
body.login-body::before, body.login-body::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
    opacity: .35; pointer-events: none;
}
body.login-body::before {
    width: 480px; height: 480px; background: #d4a017; top: -120px; left: -120px;
}
body.login-body::after {
    width: 520px; height: 520px; background: #16a34a; bottom: -150px; right: -150px;
}

.login-wrap {
    width: 100%; max-width: 980px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-radius: 20px; overflow: hidden; display: grid;
    grid-template-columns: 1.05fr 1fr; min-height: 580px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
    position: relative; z-index: 2;
}
.login-hero {
    background: linear-gradient(135deg, #054b2c, #0a6b3f);
    color: #fff; padding: 50px 44px; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.login-hero::after {
    content: ''; position: absolute; right: -100px; bottom: -100px;
    width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.hero-logo {
    width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center; margin-bottom: 28px;
}
.login-hero h1 { color: #fff; font-size: 32px; margin: 0 0 12px; letter-spacing: -.02em; line-height: 1.15; }
.login-hero p  { color: rgba(255,255,255,.85); font-size: 15px; max-width: 380px; line-height: 1.55; }
.hero-features { margin-top: auto; position: relative; z-index: 2; }
.hero-features .feat {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    color: rgba(255,255,255,.9); font-size: 13.5px;
}
.hero-features .feat .icon {
    width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.13);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-foot { color: rgba(255,255,255,.55); font-size: 12px; margin-top: 22px; }

.login-form {
    padding: 56px 48px; display: flex; flex-direction: column; justify-content: center;
}
.login-form h2 { font-size: 26px; margin: 0 0 8px; color: #0f172a; letter-spacing: -.02em; }
.login-form p.subtitle { margin: 0 0 30px; color: #64748b; font-size: 14px; }

.login-form .form-group label {
    display: block; font-size: 13px; color: #334155; font-weight: 500; margin-bottom: 6px;
}
.login-form input[type="text"], .login-form input[type="email"], .login-form input[type="password"] {
    width: 100%; padding: 13px 14px; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: 15px; transition: .2s; background: #fff;
}
.login-form input:focus {
    outline: none; border-color: #0a6b3f; box-shadow: 0 0 0 3px rgba(10,107,63,.13);
}
.password-wrap { position: relative; }
.password-wrap .toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: #94a3b8; font-size: 12px; user-select: none;
}

.form-options {
    display: flex; justify-content: space-between; align-items: center;
    margin: 8px 0 22px; font-size: 13px;
}
.remember { display: inline-flex; align-items: center; gap: 8px; color: #475569; cursor: pointer; }
.remember input { accent-color: #0a6b3f; }
.forgot { color: #0a6b3f; }

.btn-login {
    width: 100%; padding: 13px; font-size: 15px; font-weight: 600;
    background: linear-gradient(180deg, #0a6b3f, #054b2c);
    color: #fff; border: none; border-radius: 9px; cursor: pointer;
    transition: .2s; box-shadow: 0 4px 14px rgba(10,107,63,.25);
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(10,107,63,.35); }
.btn-login:active { transform: translateY(0); }

.locale-switch {
    text-align: center; margin-top: 20px; font-size: 13px; color: #94a3b8;
}
.locale-switch a { margin: 0 6px; color: #64748b; }
.locale-switch a.active { color: #0a6b3f; font-weight: 600; }

.login-foot {
    text-align: center; margin-top: 24px; font-size: 12px; color: #94a3b8;
}

@media (max-width: 880px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-hero { padding: 32px 28px; }
    .login-form { padding: 32px 28px; }
    .login-hero h1 { font-size: 24px; }
}