:root {
    --bg: #0C102D;
    --blue: #263286;
    --red: #D13800;
    --orange: #FF7400;
    --yellow: #FFDE00;
    --white: #FFFFFF;
    --muted: #a9b2d0;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--white);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 82% 15%, rgba(38, 50, 134, .52), transparent 32rem),
        radial-gradient(circle at 12% 88%, rgba(209, 56, 0, .20), transparent 26rem),
        linear-gradient(145deg, #070a1d, var(--bg));
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.login-shell { width: min(100%, 430px); position: relative; z-index: 1; }
.form {
    width: 100%;
    padding: clamp(28px, 6vw, 42px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.11);
    background: linear-gradient(145deg, rgba(20, 29, 73, .94), rgba(10, 15, 43, .96));
    box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.06);
    backdrop-filter: blur(16px);
}
.brand-mark {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #171100;
    font-weight: 900;
    font-size: 1.15rem;
    background: linear-gradient(145deg, var(--yellow), var(--orange));
    box-shadow: 0 14px 34px rgba(255, 116, 0, .22);
}
.form h1 { margin: 0; font-size: clamp(1.55rem, 6vw, 2.05rem); letter-spacing: -.045em; }
.form .subtitle { margin: 8px 0 28px; color: var(--muted); font-size: .94rem; }
.form .inputBox { margin-top: 18px; }
.form label { display: block; margin-bottom: 8px; color: #e6e9f5; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form input[type="text"], .form input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    color: #fff;
    background: rgba(4, 8, 29, .62);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    outline: none;
    font-size: 1rem;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form input[type="text"]:focus, .form input[type="password"]:focus {
    border-color: rgba(255,116,0,.72);
    background: rgba(4, 8, 29, .82);
    box-shadow: 0 0 0 4px rgba(255,116,0,.10);
}
.form input::placeholder { color: #697394; }
.form input[type="submit"] {
    width: 100%;
    height: 50px;
    margin-top: 8px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    cursor: pointer;
    font-weight: 850;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--blue), #3748b9 65%, var(--orange));
    box-shadow: 0 14px 34px rgba(38,50,134,.30);
    transition: transform .14s ease, filter .14s ease;
}
.form input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }
.form input[type="submit"]:active { transform: translateY(0); }
.login-foot { margin-top: 22px; color: #7882a3; font-size: .73rem; text-align: center; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 480px) { body { padding: 14px; } .form { border-radius: 20px; } }


/* Poppins global */
html, body, body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad) {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}