:root {
    --login-bg: #0b0f10;
    --login-surface: #151a1d;
    --login-border: #334044;
    --login-text: #edf2f2;
    --login-muted: #99a8ad;
    --login-accent: #2dd4bf;
    --login-danger: #fb7185;
}

body {
    background:
        linear-gradient(180deg, rgba(45, 212, 191, 0.07), rgba(11, 15, 16, 0) 38%),
        var(--login-bg);
    color: var(--login-text);
    font-family: "Inter", "Segoe UI", sans-serif;
}

.login-container {
    max-width: 420px;
    padding: 32px;
    background: var(--login-surface);
    border: 1px solid var(--login-border);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.icon-top i {
    color: var(--login-accent);
}

h2 {
    color: var(--login-text);
    font-size: 24px;
}

label,
.remember-group label {
    color: var(--login-muted);
}

input[type="text"],
input[type="password"] {
    min-height: 44px;
    background: #0f1416;
    color: var(--login-text);
    border: 1px solid var(--login-border);
    border-radius: 8px;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.16);
}

input[type="submit"] {
    min-height: 44px;
    background: var(--login-accent);
    color: #06201d;
    border-radius: 8px;
    font-weight: 800;
}

input[type="submit"]:hover {
    background: #6ee7d8;
}

.error {
    color: var(--login-danger);
}