.mgl-form-wrap {
    --mgl-bg: #1e2527;
    --mgl-bg2: #1c2224;
    --mgl-orange: #f5a623;
    --mgl-orange-soft: rgba(245, 166, 35, .18);
    --mgl-teal: #2ec4b6;
    --mgl-teal-dark: #22a297;
    --mgl-text: #f4f3ef;
    --mgl-muted: #a9b0ae;
    --mgl-border: rgba(255, 255, 255, .08);

    max-width: 440px;
    margin: 0 auto;
    background: var(--mgl-bg);
    border: 1px solid var(--mgl-border);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--mgl-text);
}

.mgl-form-wrap::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid var(--mgl-orange-soft);
}

.mgl-form-wrap .mgl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mgl-orange);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
}

.mgl-form-wrap .mgl-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mgl-orange);
    display: inline-block;
}

.mgl-form-wrap h3 {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--mgl-text);
}

.mgl-form-wrap .mgl-sub {
    color: var(--mgl-muted);
    font-size: 14px;
    margin: 0 0 24px;
}

.mgl-form-wrap .mgl-field {
    margin-bottom: 18px;
}

.mgl-form-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mgl-muted);
    margin-bottom: 7px;
}

.mgl-form-wrap input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid var(--mgl-border);
    background: var(--mgl-bg2);
    color: var(--mgl-text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease;
    box-sizing: border-box;
}

.mgl-form-wrap input::placeholder {
    color: #6b7473;
}

.mgl-form-wrap input:focus {
    border-color: var(--mgl-teal);
}

.mgl-form-wrap .mgl-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: var(--mgl-teal);
    color: #0d1a19;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 4px;
    transition: background .15s ease, transform .1s ease;
}

.mgl-form-wrap .mgl-btn:hover {
    background: var(--mgl-teal-dark);
}

.mgl-form-wrap .mgl-btn:active {
    transform: scale(.99);
}

.mgl-form-wrap .mgl-note {
    font-size: 12px;
    color: var(--mgl-muted);
    text-align: center;
    margin-top: 14px;
    margin-bottom: 0;
}

.mgl-form-wrap .mgl-error {
    background: rgba(224, 92, 92, .12);
    border: 1px solid rgba(224, 92, 92, .4);
    color: #e88;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.mgl-form-wrap .mgl-success {
    text-align: center;
    padding: 10px 0 4px;
}

.mgl-form-wrap .mgl-tick {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(46, 196, 182, .15);
    color: var(--mgl-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
}

.mgl-form-wrap .mgl-success h3 {
    margin-bottom: 8px;
}

.mgl-form-wrap .mgl-success p {
    color: var(--mgl-muted);
    font-size: 14px;
    margin: 0;
}