:root {
    color-scheme: light;
    --ink: #12363d;
    --muted: #55727a;
    --primary: #08a9c5;
    --secondary: #0b9362;
    --paper: #f6fbfb;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, sans-serif;
}
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    position: relative;
    overflow: hidden;
}
.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0 42% 0 0;
    background: linear-gradient(145deg, rgba(8,169,197,.94), rgba(11,147,98,.92)), url("/img/bg-hero.jpg") center/cover;
}
.brand {
    position: absolute;
    z-index: 2;
    top: 34px;
    left: 6vw;
    background: white;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(18,54,61,.16);
}
.brand img { display: block; width: 176px; max-height: 58px; object-fit: contain; }
.auth-copy {
    z-index: 1;
    align-self: center;
    max-width: 680px;
    padding: 150px 8vw 80px 6vw;
    color: white;
}
.eyebrow { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0; }
.auth-copy h1 { margin: 16px 0; font: 800 clamp(38px, 5vw, 68px)/1.05 Raleway, sans-serif; }
.auth-copy > p:last-of-type { max-width: 580px; font-size: 18px; line-height: 1.7; }
.book-lines { display: flex; align-items: end; gap: 8px; height: 88px; margin-top: 42px; }
.book-lines span { width: 23px; border: 2px solid rgba(255,255,255,.8); border-radius: 3px 3px 0 0; }
.book-lines span:nth-child(1) { height: 65px; }
.book-lines span:nth-child(2) { height: 82px; }
.book-lines span:nth-child(3) { height: 54px; }
.auth-panel {
    grid-column: 2;
    align-self: center;
    width: min(520px, calc(100% - 48px));
    margin: 32px auto;
    padding: 42px;
}
.back-link, .auth-switch a { color: var(--secondary); font-weight: 700; text-decoration: none; }
.auth-panel h2 { margin: 30px 0 8px; font: 800 36px Raleway, sans-serif; }
.panel-copy, small { color: var(--muted); }
form { margin-top: 28px; }
label { display: block; margin: 18px 0 8px; font-weight: 700; }
input {
    width: 100%;
    height: 54px;
    border: 1px solid #c8dadd;
    border-radius: 6px;
    padding: 0 15px;
    color: var(--ink);
    background: white;
    font: inherit;
}
input:focus { outline: 3px solid rgba(8,169,197,.16); border-color: var(--primary); }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle { position: absolute; right: 8px; top: 8px; height: 38px; border: 0; background: transparent; color: var(--secondary); font-weight: 700; cursor: pointer; }
.primary-action {
    width: 100%;
    height: 56px;
    margin-top: 26px;
    border: 0;
    border-radius: 6px;
    color: white;
    background: linear-gradient(100deg, var(--primary), var(--secondary));
    font: 700 16px Inter, sans-serif;
    cursor: pointer;
}
.primary-action:disabled { opacity: .65; cursor: wait; }
.auth-switch { margin-top: 24px; text-align: center; color: var(--muted); }
.message { margin-top: 20px; padding: 12px 14px; border-left: 4px solid #d64045; background: #fff0f0; color: #8b2529; }
@media (max-width: 860px) {
    .auth-shell { display: block; padding-top: 88px; }
    .auth-shell::before { inset: 0 0 auto; height: 210px; }
    .brand { top: 24px; left: 24px; }
    .auth-copy { height: 122px; padding: 0 24px; }
    .auth-copy h1, .eyebrow, .auth-copy > p:last-of-type, .book-lines { display: none; }
    .auth-panel { width: 100%; margin: 0; padding: 38px 24px 50px; background: var(--paper); }
}