body {
        font-family: 'Segoe UI', Arial, sans-serif;
        margin: 0;
        background: #181818;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(120deg, #222 80%, #e63946 100%);

    }

    .signup-card {
        background: #222;
        padding: 40px 30px;
        border-radius: 10px;
        box-shadow: 0 2px 12px #0005;
        max-width: 400px;
        width: 100%;
        text-align: center;
    }

    .signup-card h2 {
        color: #e63946;
        margin-bottom: 25px;
        font-size: 1.8em;
        letter-spacing: 1px;
    }

    .signup-card form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .signup-card input[type="text"],
    .signup-card input[type="password"] {
        padding: 12px 14px;
        border-radius: 6px;
        border: none;
        background: #181818;
        color: #fff;
        font-size: 1em;
        outline: none;
        transition: 0.2s;
    }

    .signup-card input:focus {
        background: #232323;
        box-shadow: 0 0 0 2px #e63946cc;
        border: 1px solid #e63946;
    }

    .signup-card input[type="submit"] {
        background: #e63946;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 12px;
        font-size: 1.1em;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.2s;
    }

    .signup-card input[type="submit"]:hover {
        background: #c92c3a;
    }

    .alert {
        list-style: none;
        padding: 0;
        margin: 0 0 15px 0;
    }

    .alert li {
        background: #c92c3a;
        color: #fff;
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 8px;
        font-size: 0.95em;
        text-align: left;
    }

    .switch-link {
        margin-top: 18px;
        font-size: 0.95em;
        color: #ccc;
    }

    .switch-link a {
        color: #e63946;
        text-decoration: none;
        font-weight: bold;
    }

    .switch-link a:hover {
        text-decoration: underline;
    }