:root {
    --pink: #f7b6cf;
    --pink-dark: #d979a2;

    --blue: #b8dcff;
    --blue-dark: #6da9e4;

    --text: #25222a;
    --muted: #77727d;

    --surface: rgba(255, 255, 255, 0.82);
    --border: rgba(255, 255, 255, 0.7);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;

    font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    color: var(--text);

    background:
            radial-gradient(
                    circle at 15% 20%,
                    rgba(247, 182, 207, 0.8),
                    transparent 32%
            ),
            radial-gradient(
                    circle at 85% 80%,
                    rgba(184, 220, 255, 0.9),
                    transparent 34%
            ),
            linear-gradient(
                    135deg,
                    #fff7fa,
                    #f7f5ff 50%,
                    #f3f9ff
            );
}

.page {
    width: 100%;
    max-width: 720px;
}

.brand {
    margin-bottom: 24px;
    text-align: center;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: 14px;

    border-radius: 22px;

    font-size: 30px;

    background:
            linear-gradient(
                    135deg,
                    var(--pink),
                    var(--blue)
            );

    box-shadow:
            0 12px 30px
            rgba(109, 169, 228, 0.18);
}

h1 {
    margin: 0;

    font-size: clamp(
            2rem,
            5vw,
            3.2rem
    );

    line-height: 1.05;
    letter-spacing: -0.04em;
}

.subtitle {
    max-width: 520px;

    margin: 12px auto 0;

    color: var(--muted);

    font-size: 1.05rem;
    line-height: 1.6;
}

.card {
    padding: 32px;

    border:
            1px solid
            var(--border);

    border-radius: 28px;

    background:
            var(--surface);

    backdrop-filter:
            blur(18px);

    -webkit-backdrop-filter:
            blur(18px);

    box-shadow:
            0 25px 70px
            rgba(40, 35, 55, 0.12);
}

.field {
    margin-bottom: 24px;
}

label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.95rem;
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;

    padding: 14px 16px;

    border:
            1px solid
            rgba(37, 34, 42, 0.12);

    border-radius: 14px;

    background:
            rgba(255, 255, 255, 0.85);

    color: var(--text);

    font: inherit;
}

input[type="checkbox"] {
    width: auto;

    margin-right: 8px;
}

input[type="file"] {
    padding: 12px;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;

    border-color:
            var(--blue-dark);

    background:
            white;

    box-shadow:
            0 0 0 4px
            rgba(109, 169, 228, 0.12);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.help-text {
    margin-top: 7px;

    color: var(--muted);

    font-size: 0.86rem;
    line-height: 1.4;
}

.errors {
    margin-top: 8px;

    color: #b3261e;

    font-size: 0.88rem;
}

.submit {
    width: 100%;

    padding: 15px 18px;

    border: 0;
    border-radius: 16px;

    color: white;

    font: inherit;
    font-size: 1rem;
    font-weight: 800;

    cursor: pointer;

    background:
            linear-gradient(
                    135deg,
                    var(--pink-dark),
                    #a875d6 48%,
                    var(--blue-dark)
            );

    box-shadow:
            0 12px 28px
            rgba(168, 117, 214, 0.23);

    transition:
            transform 0.15s ease,
            box-shadow 0.15s ease;
}

.submit:hover {
    transform:
            translateY(-1px);

    box-shadow:
            0 16px 34px
            rgba(168, 117, 214, 0.28);
}

.footer-note {
    margin-top: 18px;

    text-align: center;

    color: var(--muted);

    font-size: 0.82rem;
}

@media (max-width: 600px) {
    body {
        padding: 24px 14px;
    }

    .card {
        padding: 22px;

        border-radius: 22px;
    }
}