/* Lesson Studio — Login (Task 003). Sized in px against docs/REFERENCES/login.png at 1672×941. */
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }

:root {
    --ls-blue: #1190fe;
    --ls-brand: #0b4fd0;
    --ls-navy: #0c1f55;
    --ls-muted: #5e6d8e;
    --ls-line: #d3dceb;
    --ls-page: #dbeefe;
    --ls-danger: #d93a4a;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 67px 48px 73px;
    font-family: "Lato", system-ui, sans-serif;
    color: var(--ls-navy);
    background:
        radial-gradient(ellipse 58% 42% at 22% -6%, rgba(255, 255, 255, .55), transparent 70%),
        radial-gradient(ellipse 42% 30% at 4% 88%, rgba(255, 255, 255, .45), transparent 72%),
        radial-gradient(ellipse 48% 36% at 100% 72%, rgba(196, 226, 252, .8), transparent 70%),
        radial-gradient(ellipse 60% 30% at 70% 104%, rgba(255, 255, 255, .5), transparent 70%),
        linear-gradient(180deg, #d2eafd 0%, #e2f1fe 55%, #d9edfe 100%);
    background-color: var(--ls-page);
    overflow-x: hidden;
}

.login-card {
    display: flex;
    width: 100%;
    max-width: 1532px;
    height: 798px;
    border-radius: 24px;
    overflow: hidden;
    background: #fbfcfd;
    box-shadow: 0 18px 40px rgba(46, 116, 196, .14), 0 2px 8px rgba(46, 116, 196, .06);
}

/* Left: illustration */
.login-art {
    position: relative;
    flex: 0 0 55.8%;
    overflow: hidden;
    background: #36a9f5;
}
.login-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.login-art-text {
    position: absolute;
    top: 186px;
    left: 37.9%;
    right: 32px;
    color: #fff;
}
.login-art-title {
    margin: 0;
    font-size: clamp(38px, 3.41vw, 57px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.2px;
}
.login-art-lead {
    max-width: 500px;
    margin: 10px 0 0;
    font-size: clamp(19px, 1.645vw, 27.5px);
    line-height: 1.38;
    color: rgba(255, 255, 255, .86);
}

/* Right: form panel */
.login-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 86px 6.1% 0 6.2%;
    min-width: 0;
}
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.login-brand span {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--ls-brand);
}
.login-heading {
    margin: 49px 0 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.3px;
}
.login-lead {
    max-width: 392px;
    margin: 6px 0 0;
    font-size: 20px;
    line-height: 27px;
    color: var(--ls-muted);
}

.login-form { display: flex; flex-direction: column; margin-top: 36px; }
.login-label {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    color: var(--ls-navy);
    margin-bottom: 9px;
}
.login-field + .login-label { margin-top: 23px; }

.login-field {
    display: flex;
    align-items: center;
    height: 58px;
    padding: 0 20px 0 21px;
    border: 1.5px solid var(--ls-line);
    border-radius: 8px;
    background: #fff;
    color: #54688e;
    transition: border-color .15s, box-shadow .15s;
}
.login-field:focus-within { border-color: var(--ls-blue); box-shadow: 0 0 0 3px rgba(17, 144, 254, .15); }
.login-field.is-invalid { border-color: var(--ls-danger); }
.login-field > svg { flex: none; }
.login-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin-left: 20px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 20px;
    color: var(--ls-navy);
}
.login-field input::placeholder { color: #7884a0; opacity: 1; }

.login-eye {
    display: grid;
    place-items: center;
    flex: none;
    padding: 4px;
    margin-left: 8px;
    border: 0;
    background: none;
    color: #576b92;
    cursor: pointer;
    border-radius: 6px;
}
.login-eye:focus-visible { outline: 2px solid var(--ls-blue); }
.login-eye[aria-pressed="true"] .login-eye-slash { display: none; }

.login-error {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--ls-danger);
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 64px;
    margin-top: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--ls-blue);
    color: #fff;
    font: inherit;
    font-size: 23px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}
.login-submit:hover { background: #0a82ec; }
.login-submit:focus-visible { outline: 3px solid rgba(17, 144, 254, .35); outline-offset: 2px; }

/* Smaller desktops: keep proportions, let height follow content */
@media (max-height: 900px) {
    body.login-page { padding-top: 24px; padding-bottom: 24px; }
    .login-card { height: auto; min-height: 700px; }
    .login-panel { padding-top: 52px; padding-bottom: 44px; }
    .login-heading { margin-top: 34px; }
    .login-form { margin-top: 28px; }
}

/* Narrower desktops: keep the headline in the open sky right of the tree */
@media (max-width: 1500px) and (min-width: 1001px) {
    .login-art-text { left: 44%; top: 150px; }
}

/* Tablet / mobile: stack, shrink illustration */
@media (max-width: 1000px) {
    body.login-page { padding: 24px 16px; }
    .login-card { flex-direction: column; height: auto; min-height: 0; max-width: 560px; }
    .login-art { flex: 0 0 220px; }
    .login-art-img { object-position: 70% 25%; }
    .login-art-text { top: 28px; left: 28px; right: 28px; }
    .login-art-title { font-size: 34px; }
    .login-art-lead { font-size: 17px; line-height: 24px; }
    .login-panel { padding: 36px 28px 40px; }
    .login-brand span { font-size: 36px; }
    .login-heading { margin-top: 28px; font-size: 30px; }
    .login-lead { font-size: 17px; line-height: 24px; }
    .login-brand img { width: 74px; height: auto; }
    .login-field { height: 52px; padding: 0 14px 0 16px; }
    .login-field input { margin-left: 14px; font-size: 17px; }
    .login-submit { height: 56px; font-size: 20px; }
}