@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --driver-green: #0aa13c;
    --driver-green-dark: #078632;
    --driver-green-light: #eaf9ef;
    --driver-ink: #162033;
    --driver-muted: #6f7b8e;
    --driver-line: #d6e3da;
}

* { box-sizing: border-box; }

body.driver-auth {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    padding: 34px 18px;
    position: relative;
    color: var(--driver-ink);
    font-family: 'Inter', Arial, sans-serif;
    background:
        radial-gradient(circle at 14% 34%, #f3fff7 0, transparent 34%),
        radial-gradient(circle at 88% 48%, #f2fff6 0, transparent 36%),
        linear-gradient(120deg, #fbfffc 0%, #f4fcf7 52%, #f9fffb 100%);
}

body.driver-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, #e6f8ec80, transparent 28%), radial-gradient(circle at 50% 0, #eaf8ee80, transparent 45%);
}

.driver-art {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    color: #16a34a;
    opacity: .15;
}

.driver-map {
    position: absolute;
    width: 650px;
    height: 650px;
    left: -165px;
    bottom: -210px;
    transform: rotate(-18deg);
    background-image: linear-gradient(#fff 3px, transparent 3px), linear-gradient(90deg, #fff 3px, transparent 3px);
    background-size: 110px 92px;
}

.driver-route { position: absolute; left: 3%; top: 24%; width: 390px; height: 430px; }
.driver-route path { fill: none; stroke: #0ca542; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 11 13; }
.driver-pin { position: absolute; left: 18%; top: 25%; font-size: 66px; }
.driver-cloud { position: absolute; right: 7%; top: 15%; font-size: 105px; color: #aee5be; }

.driver-city { position: absolute; right: 0; bottom: 7%; width: 430px; height: 520px; opacity: .38; }
.driver-building { position: absolute; bottom: 0; border-radius: 5px 5px 0 0; background: linear-gradient(#a9e2b9, #73c88d); }
.driver-building.one { left: 0; width: 92px; height: 330px; }
.driver-building.two { left: 115px; width: 110px; height: 230px; }
.driver-building.three { right: 58px; width: 100px; height: 390px; }
.driver-building.four { right: -38px; width: 72px; height: 270px; }
.driver-building::before { content: ""; position: absolute; left: 18%; right: 18%; top: -27px; height: 29px; border-radius: 6px 6px 0 0; background: inherit; }
.driver-courier { position: absolute; right: 4%; bottom: 6%; font-size: 225px; transform: scaleX(-1); color: #1ab050; opacity: .58; }
.driver-leaf { position: absolute; bottom: -10px; font-size: 145px; color: #51c879; }
.driver-leaf.left { left: -18px; transform: rotate(-28deg); }
.driver-leaf.right { right: -15px; transform: rotate(24deg); }

.driver-card {
    position: relative;
    z-index: 2;
    width: min(94vw, 620px);
    padding: 42px 52px 34px;
    border: 1px solid #fff;
    border-radius: 30px;
    background: #ffffffef;
    box-shadow: 0 22px 70px #123b201c;
    backdrop-filter: blur(10px);
}

.driver-card.register { width: min(94vw, 780px); padding-top: 34px; }

.driver-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--driver-green);
    text-decoration: none;
    margin-bottom: 23px;
}

.driver-brand-icon { font-size: 49px; line-height: 1; }
.driver-brand-name { font-size: 35px; font-weight: 800; letter-spacing: -1px; }
.driver-brand-line { width: 44px; height: 4px; margin: 0 auto 27px; border-radius: 5px; background: var(--driver-green); }
.driver-heading { text-align: center; margin-bottom: 26px; }
.driver-heading h1 { margin: 0 0 10px; font-size: 34px; letter-spacing: -.8px; line-height: 1.2; }
.driver-heading p { margin: 0; color: var(--driver-muted); font-size: 16px; }

.driver-alert { padding: 12px 14px; margin-bottom: 17px; border-radius: 11px; font-size: 13px; text-align: center; }
.driver-alert.error { color: #9f1239; border: 1px solid #fecdd3; background: #fff1f2; }
.driver-alert.success { color: #08762e; border: 1px solid #b9edc9; background: #ecfdf3; }

.driver-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.driver-field { margin-bottom: 16px; }
.driver-field.full { grid-column: 1 / -1; }
.driver-field label { display: block; margin: 0 0 8px; color: var(--driver-ink); font-size: 13px; font-weight: 700; }
.driver-input { position: relative; }
.driver-input > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--driver-green); font-size: 18px; pointer-events: none; }
.driver-input input {
    width: 100%;
    height: 58px;
    padding: 0 51px;
    border: 1.5px solid var(--driver-line);
    border-radius: 13px;
    outline: none;
    color: var(--driver-ink);
    background: #fff;
    font: 500 15px 'Inter', sans-serif;
    transition: .2s;
}
.driver-input input::placeholder { color: #96a1b1; font-weight: 400; }
.driver-input input:focus { border-color: var(--driver-green); box-shadow: 0 0 0 4px #0aa13c14; }
.driver-password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 43px; height: 43px; border: 0; background: transparent; color: #8491a3; font-size: 18px; cursor: pointer; }

.driver-password-meter { height: 4px; margin-top: 7px; border-radius: 5px; overflow: hidden; background: #edf1ee; }
.driver-password-meter span { display: block; width: 0; height: 100%; transition: .2s; }
.driver-password-hint { display: block; color: var(--driver-muted); font-size: 11px; margin-top: 5px; }

.driver-submit {
    width: 100%;
    height: 59px;
    margin-top: 8px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(90deg, #11c94a, #079d39);
    box-shadow: 0 10px 24px #08a83d2c;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    transition: .2s;
}
.driver-submit:hover { transform: translateY(-1px); background: linear-gradient(90deg, #0fba44, #078932); }
.driver-submit:active { transform: translateY(0); }
.driver-submit i { margin-right: 9px; }

.driver-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid #e6ece8;
}
.driver-links span { width: 1px; height: 32px; background: #d8e0db; }
.driver-links a { color: var(--driver-green-dark); text-decoration: none; font-size: 14px; font-weight: 700; }
.driver-links a:hover { text-decoration: underline; }
.driver-links i { margin-right: 7px; }

@media (max-width: 760px) {
    body.driver-auth { padding: 16px; }
    .driver-art { opacity: .07; }
    .driver-city, .driver-courier { right: -34%; }
    .driver-route { left: -35%; }
    .driver-card, .driver-card.register { width: 100%; padding: 30px 22px 25px; border-radius: 24px; }
    .driver-brand { gap: 12px; margin-bottom: 18px; }
    .driver-brand-icon { font-size: 39px; }
    .driver-brand-name { font-size: 27px; }
    .driver-brand-line { margin-bottom: 21px; }
    .driver-heading h1 { font-size: 27px; }
    .driver-heading p { font-size: 14px; }
    .driver-form-grid { grid-template-columns: 1fr; gap: 0; }
    .driver-field.full { grid-column: auto; }
    .driver-links { gap: 14px; font-size: 13px; }
    .driver-links a { font-size: 12px; }
}

@media (max-height: 760px) and (min-width: 761px) {
    body.driver-auth { padding: 18px; }
    .driver-card { padding-top: 27px; padding-bottom: 25px; }
    .driver-brand { margin-bottom: 14px; }
    .driver-brand-icon { font-size: 39px; }
    .driver-brand-name { font-size: 29px; }
    .driver-brand-line { margin-bottom: 18px; }
    .driver-heading { margin-bottom: 19px; }
    .driver-heading h1 { font-size: 28px; }
    .driver-input input, .driver-submit { height: 52px; }
    .driver-links { margin-top: 20px; padding-top: 18px; }
}