body {
    position: relative;
    isolation: isolate;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #7294BD 0%, #8DAACD 55%, #C3D5E9 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 24px 16px;
    margin: 0;
}

/* Decorative login curves stay behind the form and never intercept input. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M0%200H1600V170C1450%20510%201050%20650%20650%20680C320%20660%2090%20520%200%20350Z%22%20fill%3D%22%237294BD%22%20fill-opacity%3D%22.28%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M1600%20160C1420%20520%20940%20620%20550%20675C320%20710%20125%20710%200%20675V1000H1600Z%22%20fill%3D%22%23C3D5E9%22%20fill-opacity%3D%22.24%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%20625C360%20670%20520%20785%20720%201000H980C700%20850%20400%20745%200%20710Z%22%20fill%3D%22%23C3D5E9%22%20fill-opacity%3D%22.36%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%20710C420%20700%20660%20950%201600%201000H1170C640%20950%20400%20745%200%20710Z%22%20fill%3D%22%237294BD%22%20fill-opacity%3D%22.14%22%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.login-container {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(45, 65, 90, 0.18);
    width: 300px;
    max-width: calc(100% - 80px);
    text-align: center;
}

.login-logo img {
    max-width: 150px;
    margin-bottom: 20px;
}

.login-form h2 {
    margin-bottom: 20px;
    color: #303845;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #43516A;
    font-size: 14px;
}

.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%;
    padding: 10px;
    background: #F3F6FB;
    border: 1px solid #B8CBE3;
    border-radius: 4px;
    box-sizing: border-box;
}

.login-form button {
    background-color: #5D7FA9;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    margin-top: 10px;
}

.login-form button:hover {
    background-color: #4C6D97;
}

.links {
    margin-top: 20px;
    font-size: 14px;
}

.links a {
    color: #829D45;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}