:root {
    --green: #2e7d32;
    --green-dark: #205b27;
    --mint: #eaf6e7;
    --pink: #f8e8ef;
    --ink: #243126;
    --muted: #758078;
    --line: #e2e9e2
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100vh;
    background: #f4f8f3;
    font-family: Poppins, Arial, sans-serif;
    color: var(--ink);
    padding: 28px
}

.register-shell {
    width: min(1120px, 100%);
    min-height: calc(100vh - 56px);
    margin: auto;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    box-shadow: 0 18px 60px #244d2914
}

.brand-panel {
    position: relative;
    overflow: hidden;
    padding: 52px 42px;
    background: linear-gradient(145deg, #e9f6e4 0%, #f7f5f7 56%, #f8e8ef 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.brand-panel:after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid #2e7d3220;
    right: -140px;
    bottom: 40px;
    box-shadow: 0 0 0 35px #2e7d3208, 0 0 0 75px #2e7d3206
}

.brand-panel img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    margin-bottom: 30px
}

.eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--green);
    margin: 0 0 12px
}

.brand-panel h1 {
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.2;
    letter-spacing: -1.3px;
    margin: 0 0 18px;
    max-width: 390px
}

.brand-panel>p:not(.eyebrow) {
    color: #647166;
    font-size: 14px;
    line-height: 1.9;
    max-width: 350px
}

.brand-bottom {
    margin-top: auto;
    padding-top: 55px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 600
}

.brand-bottom i {
    margin-right: 8px
}

.form-panel {
    padding: 38px clamp(26px, 5vw, 66px);
    display: flex;
    align-items: center;
    justify-content: center
}

.form-wrap {
    width: 100%;
    max-width: 540px
}

.back-link {
    display: inline-block;
    text-decoration: none;
    color: #657168;
    font-size: 12px;
    margin-bottom: 25px
}

.back-link i {
    margin-right: 7px
}

.heading {
    margin-bottom: 22px
}

.heading-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--mint);
    color: var(--green);
    display: grid;
    place-items: center;
    margin-bottom: 13px
}

.heading h2 {
    font-size: 25px;
    letter-spacing: -.6px;
    margin: 0 0 5px
}

.heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px
}

.field {
    margin-bottom: 14px;
    min-width: 0
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 7px
}

.field label span {
    color: #d65d82
}

.field label .optional {
    color: #89938b;
    font-size: 10px;
    font-weight: 400;
    margin-left: 5px
}

input, select {
    font: inherit;
    font-size: 12px;
    color: var(--ink);
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0 13px;
    outline: none;
    transition: border-color .2s, box-shadow .2s
}

input::placeholder {
    color: #a2aaa3
}

input:focus, select:focus {
    border-color: #75b878;
    box-shadow: 0 0 0 3px #2e7d3212
}

.password-wrap {
    position: relative
}

.password-wrap input {
    padding-right: 45px
}

.toggle {
    position: absolute;
    right: 5px;
    top: 4px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #7c887e;
    cursor: pointer
}

.approval-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: #f2f8ef;
    border: 1px solid #e2efdd;
    color: #527455;
    border-radius: 10px;
    padding: 12px;
    font-size: 10px;
    line-height: 1.7;
    margin: 19px 0
}

.approval-note i {
    margin-top: 3px
}

.submit-btn {
    width: 100%;
    height: 47px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font: 600 12px Poppins, sans-serif;
    cursor: pointer;
    box-shadow: 0 5px 12px #2e7d3220;
    transition: background .2s
}

.submit-btn:hover {
    background: var(--green-dark)
}

.submit-btn i {
    margin-left: 8px
}

.login-prompt {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    margin: 20px 0 0
}

.login-prompt a {
    color: var(--green);
    font-weight: 700;
    text-decoration: none
}

.notice {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.7;
    margin-bottom: 18px
}

.notice i {
    margin-top: 3px
}

.notice.success {
    background: #eef8ed;
    color: #27652c;
    border: 1px solid #d4ebd1
}

.notice.error {
    background: #fff1f1;
    color: #a42e37;
    border: 1px solid #f5d6d8
}

@media(max-width:800px) {
    body {
        padding: 14px
    }

    .register-shell {
        grid-template-columns: 1fr
    }

    .brand-panel {
        padding: 25px 28px
    }

    .brand-panel img {
        width: 60px;
        height: 60px;
        margin-bottom: 15px
    }

    .brand-panel h1 {
        font-size: 29px
    }

    .brand-panel>p:not(.eyebrow) {
        margin-bottom: 0
    }

    .brand-bottom {
        padding-top: 20px
    }

    .form-panel {
        padding: 30px 24px
    }

    .brand-panel:after {
        width: 180px;
        height: 180px;
        right: -90px;
        bottom: -60px
    }
}

@media(max-width:430px) {
    .field-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    .form-panel {
        padding: 25px 18px
    }

    .heading h2 {
        font-size: 23px
    }
}