*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --green-400: #8CC63F; --green-500: #7AB535;
    --green-600: #5a8a28; --green-700: #3d6118;
}
body {
    font-family: 'DM Sans', sans-serif;
    background: #f5f5f5; color: #1a1a1a;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    position: relative; overflow: hidden;
}
body::before {
    content: ''; position: absolute;
    top: 20%; right: -10%;
    width: 500px; height: 500px;
    border: 2px solid rgba(140,198,63,0.08);
    border-radius: 50%;
}
body::after {
    content: ''; position: absolute;
    bottom: 10%; left: -5%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(140,198,63,0.08), transparent 70%);
}
.login-container {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
}
.login-logo {
    display: flex; align-items: center; gap: 12px;
    justify-content: center; margin-bottom: 40px;
}
.login-logo .bar { width: 6px; height: 36px; background: #8CC63F; border-radius: 2px; }
.login-logo span { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 3px; color: #1a1a1a; }
.login-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px; padding: 40px 36px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.login-card h1 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; margin-bottom: 4px; color: #1a1a1a; }
.login-card .subtitle { font-size: 14px; color: rgba(0,0,0,0.4); margin-bottom: 32px; }
.error-msg {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15);
    color: #dc2626; padding: 10px 14px; border-radius: 8px;
    font-size: 13px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: rgba(0,0,0,0.5);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.input-wrap { position: relative; display: flex; align-items: center; }

.input-wrap > i:first-child { position: absolute; left: 14px; font-size: 18px; color: rgba(0,0,0,0.25); pointer-events: none; }
.input-wrap input {
    width: 100%; background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 10px;
    padding: 14px 14px 14px 44px;
    font-family: 'DM Sans', sans-serif; font-size: 14px; color: #1a1a1a;
    transition: all 0.3s; outline: none;
}
.input-wrap input::placeholder { color: rgba(0,0,0,0.3); }
.input-wrap input:focus { border-color: rgba(140,198,63,0.5); box-shadow: 0 0 0 3px rgba(140,198,63,0.1); }
.toggle-pw {
    position: absolute; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none; border-radius: 8px;
    color: rgba(0,0,0,0.35); cursor: pointer;
    font-size: 18px; padding: 0; transition: color 0.3s, background 0.3s;
}
.toggle-pw i { font-size: 18px; line-height: 1; }
.toggle-pw:hover { color: rgba(0,0,0,0.65); background: rgba(0,0,0,0.04); }
.toggle-pw:focus-visible { outline: 2px solid #8CC63F; outline-offset: 2px; }

.input-wrap input[type="password"], .input-wrap input#password { padding-right: 50px; }
.btn-login {
    width: 100%; background: #8CC63F; color: #fff;
    border: none; border-radius: 10px; padding: 14px;
    font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: all 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login:hover { background: #7AB535; transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }
.back-link {
    display: block; text-align: center; margin-top: 24px;
    font-size: 13px; color: rgba(0,0,0,0.35);
    text-decoration: none; transition: color 0.3s;
}
.back-link:hover { color: #8CC63F; }
.back-link i { font-size: 14px; vertical-align: middle; }