:root {
    color-scheme: light;
    font-family: Arial, "Noto Sans Devanagari", sans-serif;
    background: #f3f6f3;
    color: #1d3026;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 0% 0%, #dbeedc 0, transparent 34rem), #f3f6f3;
}

.page-shell {
    width: min(100% - 2rem, 720px);
    min-height: 100vh;
    margin: auto;
    display: grid;
    align-content: center;
    padding: 2rem 0;
}

.login-card, .welcome-card {
    background: #fff;
    border: 1px solid #dfe7e0;
    border-radius: 24px;
    box-shadow: 0 18px 46px rgb(25 57 37 / 12%);
}

.login-card {
    width: min(100%, 430px);
    justify-self: center;
    padding: 2.25rem;
}

.eyebrow {
    margin: 0 0 .55rem;
    color: #437251;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
}

h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.2; }

.intro { margin: .85rem 0 1.75rem; color: #58675e; line-height: 1.6; }

.login-form { display: grid; gap: .55rem; }

.company-name {
    margin: .25rem 0 .5rem;
    color: #275d36;
    font-size: clamp(2.1rem, 6.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.05;
    text-align: center;
}

label { margin-top: .75rem; font-size: .93rem; font-weight: 700; }

input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #b8c8bb;
    border-radius: 10px;
    padding: .75rem .9rem;
    font: inherit;
}

input:focus { outline: 3px solid #b9d9bd; border-color: #397448; }

button {
    min-height: 48px;
    margin-top: 1.25rem;
    border: 0;
    border-radius: 10px;
    background: #275d36;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

button:hover, button:focus-visible { background: #194627; }

.alert {
    margin: 0 0 1rem;
    border-radius: 9px;
    padding: .75rem .9rem;
    background: #fff0ef;
    color: #a32921;
    line-height: 1.45;
}

.welcome-card { overflow: hidden; }

.welcome-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 2rem 1.25rem;
}

.logout-link {
    color: #275d36;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

.welcome-photo {
    display: block;
    width: min(100% - 3rem, 340px);
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin: .5rem auto 0;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgb(25 57 37 / 14%);
}

.welcome-message {
    margin: 0;
    padding: 1.75rem 2rem 2rem;
    color: #3f4e44;
    font-size: 1.08rem;
    line-height: 1.75;
}

@media (max-width: 480px) {
    .page-shell { width: min(100% - 1rem, 720px); padding: 1rem 0; }
    .login-card { padding: 1.5rem; border-radius: 18px; }
    .welcome-header { padding: 1.5rem 1.25rem 1rem; }
    .welcome-message { padding: 1.4rem 1.25rem 1.6rem; }
}

.welcome-header {
    position: relative;
    display: block;
    text-align: center;
}

.welcome-header > div {
    text-align: center;
}

.logout-link {
    position: absolute;
    top: 2rem;
    right: 2rem;
}