:root {
    --bg: #f5f7fa;
    --card-bg: #ffffff;
    --primary: #4a90e2;
    --text: #333;
    --radius: 6px;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

body {
    background: var(--bg);
    font-family: sans-serif;
    color: var(--text);
    line-height: 1.5;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 2rem;
    background: var(--card-bg);
}

.form-card {
}

    h1 {
        margin-top: 0;
    }

    .form-card label {
        display: block;
        margin: 0.75rem 0 0.25rem;
        font-weight: bold;
    }

    input[type="text"],
    select {
        width: 40%;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--radius);
    }

    input[type="radio"] {
        margin-right: 0.25rem;
    }

    .error {
        color: #d9534f;
        font-size: 0.9rem;
    }

    .form-card ul {
        margin: 0;
        padding: 0; /* alap reset */
    }

    .form-card ul li {
        list-style-position: outside; /* marker kívül marad */
        margin-left: 1.2em; /* a blokk behúzása a marker szélességével */
        text-indent: 0; /* az első sort visszahúzza a marker alá */
    }

    .form-handle select {
        /* a tartalom szélessége alapján állítja be */
        width: max-content; /* szabványos */
        width: -moz-max-content; /* Firefox */
        width: -webkit-max-content; /* WebKit alapúaknak */
    }

    .form-handle select.spaced {
        margin-right: 1rem;
    }

    .form-handle {
        text-align: center;
    }

.button-primary {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 1rem;
    font-size: 1rem;
    font-family: inherit;
}

    .button-primary:hover {
        background: #3a78c2;
    }