.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at top right, #dcedf5 0, transparent 38%), linear-gradient(135deg, #edf4f7, #f8fafb);
}

.login-card {
    width: min(100%, 430px);
    display: grid;
    gap: 18px;
    background: #fff;
    border: 1px solid #dfe7eb;
    border-radius: 18px;
    padding: 38px;
    box-shadow: 0 24px 70px rgba(9, 38, 61, .14);
}

.login-card::before {
    content: "SAKA COMPANY";
    color: #167bc8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.login-card h1 { margin: 0; font-size: 32px; color: #09263d; }
.login-card p { margin: -8px 0 5px; color: #71828e; line-height: 1.6; }
.login-card label { display: grid; gap: 8px; color: #314b5d; font-size: 12px; font-weight: 700; }
.login-card input { width: 100%; border: 1px solid #cbd9e0; border-radius: 9px; padding: 13px 14px; font: inherit; outline: none; transition: .2s; }
.login-card input:focus { border-color: #167bc8; box-shadow: 0 0 0 3px rgba(22, 123, 200, .12); }
.login-card button { width: 100%; margin-top: 4px; padding: 14px; }
.login-card .flash { margin: 0; }

@media (max-width: 520px) {
    .login-card { padding: 28px 22px; border-radius: 14px; }
}