:root {
    --login-pointer-x: 0;
    --login-pointer-y: 0;
    --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body {
    font-family: var(--font-primary);
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.login-body {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:#010503;
    overflow:hidden;
    margin:0;
    padding:0;
}
.login-body canvas.login-trails {
    width:100%;
    height:100%;
}
.login-trails {
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}
.login-body::before,
.login-body::after {
    content:"";
    position:fixed;
    top:-30%;
    left:-30%;
    width:160%;
    height:160%;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.35), transparent 60%),
      radial-gradient(1.5px 1.5px at 80% 40%, rgba(255,255,255,0.5), transparent 55%),
      radial-gradient(2px 2px at 35% 80%, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(1.5px 1.5px at 65% 60%, rgba(255,255,255,0.45), transparent 60%),
      radial-gradient(2px 2px at 10% 70%, rgba(255,255,255,0.3), transparent 60%);
    opacity:0.45;
    animation:login-aurora 40s linear infinite;
    pointer-events:none;
}
.login-body::after {
    animation-direction:reverse;
    animation-duration:55s;
    opacity:0.35;
}
@keyframes login-aurora {
    0% { transform:translate3d(0,0,0) scale(1); }
    25% { transform:translate3d(8%, -6%, 0) scale(1.05); }
    50% { transform:translate3d(-6%, 4%, 0) scale(1.08); }
    75% { transform:translate3d(5%, 8%, 0) scale(1.03); }
    100% { transform:translate3d(0,0,0) scale(1); }
}
.login-wrapper { width:100%; max-width:420px; padding:32px 16px; box-sizing:border-box; position:relative; z-index:2 }
.login-card {
    background:rgba(6,25,14,0.9);
    border:1px solid rgba(46,91,70,0.6);
    border-radius:18px;
    padding:36px 32px;
    box-shadow:0 28px 60px rgba(3,15,8,0.6);
    display:flex;
    flex-direction:column;
    gap:24px;
    backdrop-filter: blur(20px);
}
.login-brand { text-align:center; color:#e9f7ef }
.login-brand .login-subtitle { margin:18px 0 0; font-size:14px; color:#8ab69f; letter-spacing:0.08em; text-transform:uppercase }
.login-logo { width:220px; height:auto; display:inline-block; filter: drop-shadow(0 12px 35px rgba(35,197,94,0.45)); }
.login-form { display:flex; flex-direction:column; gap:16px }
.login-form label { display:flex; flex-direction:column; gap:6px; color:#c8e7d6; font-size:13px; text-align:left; letter-spacing:0.02em }
.login-form input[type="text"], .login-form input[type="password"] {
    background:rgba(3,25,14,0.82);
    color:#f1fcf5;
    border:1px solid rgba(35,135,88,0.65);
    border-radius:12px;
    padding:12px 14px;
    font-size:15px;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-form input[type="text"]:focus, .login-form input[type="password"]:focus {
    border-color:#22c55e;
    outline:none;
    box-shadow:0 0 0 3px rgba(34,197,94,0.2);
}
.login-form input[type="text"]::placeholder,
.login-form input[type="password"]::placeholder { color:#577964 }
.login-form button {
    margin-top:8px;
    background:linear-gradient(130deg,#16a34a 0%,#22c55e 45%,#14b8a6 100%);
    border:none;
    color:#020805;
    font-weight:600;
    font-size:16px;
    letter-spacing:0.06em;
    padding:13px;
    border-radius:14px;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.login-form button:hover { transform:translateY(-2px); box-shadow:0 18px 32px rgba(34,197,94,0.35); }
.login-error { background:rgba(80,18,18,0.85); color:#fecaca; border:1px solid rgba(248,113,113,0.55); border-radius:10px; padding:10px 12px; font-size:13px }
.login-remember { flex-direction:row; align-items:center; gap:8px; color:#8ab69f; font-size:13px }
.login-remember input[type="checkbox"] { width:16px; height:16px; accent-color:#22c55e }
.login-footer { margin-top:18px; text-align:center; color:#5e8b75; font-size:12px }
.login-footer span { opacity:0.85 }

@media (max-width: 680px) {
    .login-wrapper { padding:28px 18px; }
    .login-card { padding:32px 26px; }
    .login-logo { width:180px; }
}

@media (max-width: 480px) {
    .login-body { padding:32px 12px; }
    .login-card { padding:28px 22px; gap:20px; }
    .login-form { gap:14px; }
    .login-form input[type="text"], .login-form input[type="password"] { font-size:16px; }
    .login-form button { font-size:15px; padding:12px; }
    .login-brand .login-subtitle { font-size:13px; }
}