/* Cold Steel DARK Login Theme */
:root {
    --midnight: #0b0c0e;        /* deep neutral with cold undertone */
    --matte-blue: #161a20;      /* graphite with blue whisper */
    --soft-blue: #222831;       /* smoky blue-grey */
    --text: #e6ecf3;            /* icy light grey */
    --accent: #627b94;          /* cold steel accent */
    --hover: #2c3440;           /* slate blue hover */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: var(--midnight);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Container wrapper */
.login-container {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

/* Card */
.login-form {
    background: var(--matte-blue);
    padding: 26px;
    border-radius: 10px;

    /* low-glow dark shadow */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.55);

    /* subtle border to separate from bg */
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.login-form h1 {
    margin-bottom: 12px;
    font-size: 22px;
    color: var(--text);
    font-weight: 600;
}

/* Labels */
.login-form label {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    color: #a7b2c0; /* frosted-muted */
}

/* Inputs */
.login-form input {
    width: 100%;
    padding: 12px 14px;
    margin-top: 6px;

    background: var(--soft-blue);
    border: 1px solid #2f3642;

    border-radius: 8px;
    font-size: 14px;
    color: var(--text);

    transition: border-color .2s ease, background .2s ease;
}

.login-form input::placeholder {
    color: #7e8995;
}

.login-form input:focus {
    border-color: var(--accent);
    background: #1b2027;
    outline: none;
}

/* Button */
.submit-btn {
    width: 100%;
    margin-top: 22px;
    padding: 12px 14px;

    background: var(--accent);
    color: #0b0c0e;

    border-radius: 8px;
    border: none;
    font-weight: 700;
    cursor: pointer;

    transition: background .18s ease, filter .18s ease;
}

.submit-btn:hover {
    background: var(--hover);
    color: var(--text);
    filter: brightness(1.05);
}

/* Signup link */
.signup {
    margin-top: 16px;
    text-align: center;
    color: #9aa5b5;
    font-size: 14px;
}

.signup a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s ease;
}

.signup a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 420px) {
    .login-container { padding: 16px; }
    .login-form { padding: 20px; }
}