:root {
    color-scheme: light;
    --ink: #26352d;
    --muted: #778078;
    --green: #3e654f;
    --green-dark: #31543f;
    --cream: #f7f5ef;
    --line: #e4e7df;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(ellipse at 12% 12%, rgba(221, 229, 211, .7), transparent 34%),
        radial-gradient(ellipse at 88% 88%, rgba(232, 221, 199, .55), transparent 32%),
        var(--cream);
    font-family: 'Segoe UI', Arial, sans-serif;
}

.page-shell {
    display: grid;
    min-height: 100vh;
    padding: 32px 20px;
    place-items: center;
}

.login-card {
    width: min(100%, 440px);
    padding: 42px 44px 30px;
    border: 1px solid rgba(224, 227, 217, .9);
    border-radius: 18px;
    background: rgba(255, 255, 253, .96);
    box-shadow: 0 22px 65px rgba(43, 57, 45, .09), 0 2px 8px rgba(43, 57, 45, .04);
}

.brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

.brand img { display: block; width: 285px; max-width: 100%; height: auto; }

.intro { margin: 38px 0 26px; }
.eyebrow { margin: 0 0 10px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.55px; }
h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; font-weight: 600; letter-spacing: -.7px; }
.subtitle { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.notice { margin: 0 0 20px; padding: 12px 14px; border: 1px solid; border-radius: 9px; font-size: 13px; line-height: 1.5; }
.error-notice { color: #8a3c32; border-color: #efd3cd; background: #fff5f2; }
.success-notice { color: #356347; border-color: #d6e7d9; background: #f2f8f2; }

.login-form { display: grid; gap: 19px; }
.form-field { display: grid; gap: 8px; }
label { color: #3d4941; font-size: 13px; font-weight: 600; }
input {
    width: 100%;
    height: 47px;
    padding: 0 13px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: #fff;
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #a1a9a1; }
input:focus { border-color: #71917b; box-shadow: 0 0 0 3px rgba(62, 101, 79, .12); }

button {
    display: flex;
    height: 49px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
    color: #fff;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, transform .15s ease;
}
button:hover { background: var(--green-dark); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid rgba(62, 101, 79, .3); outline-offset: 3px; }
button span { font-size: 18px; line-height: 1; }

.footer-note { margin: 27px 0 0; color: #929a91; font-size: 11px; text-align: center; }

@media (max-width: 480px) {
    .page-shell { padding: 18px 14px; }
    .login-card { padding: 32px 25px 25px; border-radius: 15px; }
    .intro { margin-top: 32px; }
    h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}