* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f5f5f5; padding: 24px; color: #222; }

.lang-selector {
    position: fixed; top: 16px; right: 16px;
    display: flex; gap: 4px; z-index: 100;
}
.lang-btn {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
    text-decoration: none; padding: 4px 8px;
    border: 1px solid #ccc; border-radius: 4px;
    color: #888; background: #fff;
    transition: color 0.2s, border-color 0.2s;
}
.lang-btn:hover { color: #333; border-color: #888; }
.lang-btn.active { color: #fff; background: #333; border-color: #333; }
.container { max-width: 800px; margin: 0 auto; }
h1 { margin-bottom: 20px; }

.progress-wrap { margin-bottom: 20px; }
.progress-label { font-size: 0.85rem; color: #666; margin-bottom: 6px; }
.progress-bar-bg { background: #ddd; border-radius: 999px; height: 10px; overflow: hidden; }
.progress-bar { height: 100%; background: #333; border-radius: 999px; transition: width 0.3s ease; }

.page { display: none; }
.page.active { display: block; }

.page-title {
    font-size: 1.3rem; font-weight: bold;
    padding-bottom: 8px; margin-bottom: 16px;
    border-bottom: 2px solid #333;
}

.section {
    background: #fff; border: 1px solid #ddd;
    border-radius: 6px; padding: 16px; margin-bottom: 16px;
}
.section-title {
    font-size: 1rem; font-weight: bold;
    margin-bottom: 14px; color: #555;
}

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 4px; font-weight: 500; }
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field textarea {
    width: 100%; padding: 8px;
    border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;
}
.field textarea { min-height: 100px; resize: vertical; }
.field-instruction { font-size: 0.82rem; color: #888; margin: 3px 0 6px; line-height: 1.4; padding-left: 10px; border-left: 2px solid #ddd; }
.field input[type="file"] { padding: 4px 0; }
.file-already-uploaded { display: block; margin-top: 4px; font-size: 0.85rem; color: #555; }
.already-submitted { background: #e8f4fd; border: 1px solid #90c8f0; color: #1a5f8a; padding: 16px 20px; border-radius: 6px; font-size: 1rem; margin-top: 16px; }

.code-wrap { display: flex; gap: 10px; margin: 10px 0 4px; }
.code-digit {
    width: 46px; height: 58px; text-align: center;
    font-size: 1.6rem; font-weight: 700; letter-spacing: 0;
    border: 2px solid #ddd; border-radius: 8px;
    background: #fafafa; color: #222; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.code-digit:focus { border-color: #333; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }

.resend-btn { background: none; border: none; color: #888; font-size: 0.83rem; cursor: pointer; text-decoration: underline; padding: 0; }
.resend-btn:hover { color: #333; }

fieldset { border: none; padding: 0; }
fieldset legend { font-weight: 500; margin-bottom: 6px; }
fieldset label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-weight: normal; }

.option-row { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 4px; }
.option-row label { margin-right: 0; }
.option-complement { margin-top: 5px; margin-left: 22px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; width: calc(100% - 22px); }

.field[data-mandatory="1"] > label,
.field[data-mandatory="1"] fieldset > legend { font-weight: 700; }

.required { color: red; }

.nav { display: flex; justify-content: space-between; margin-top: 24px; }
.nav button {
    padding: 10px 24px; font-size: 1rem; cursor: pointer;
    border: none; border-radius: 4px; background: #333; color: #fff;
}
.nav button:disabled { background: #aaa; cursor: default; }

.error { color: red; }

.char-counter { font-size: 0.8rem; color: #888; margin-top: 4px; text-align: right; }
.char-counter.char-warn { color: #e07800; }
.char-counter.char-over { color: #c00; font-weight: 600; }

.limit-hint { font-size: 0.78rem; font-weight: normal; color: #888; }

fieldset input[type="checkbox"]:disabled + * { opacity: 0.45; }
fieldset label:has(input[type="checkbox"]:disabled) { opacity: 0.45; cursor: not-allowed; }

.field-invalid > input,
.field-invalid > textarea,
.field-invalid > fieldset {
    outline: 2px solid red;
    border-radius: 4px;
}
.field-error-msg { margin-top: 4px; font-size: 0.85rem; }

.email-form {
    background: #fff;
    border-radius: 12px;
    padding: 40px 36px;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}
.email-intro {
    margin-bottom: 28px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}
.email-form .field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #444;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.email-form .field input[type="email"] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #222;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.email-form .field input[type="email"]:focus {
    outline: none;
    border-color: #333;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.email-form button {
    margin-top: 20px;
    width: 100%;
    padding: 13px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: #222;
    color: #fff;
    letter-spacing: 0.03em;
    transition: background 0.15s, transform 0.1s;
}
.email-form button:hover { background: #000; }
.email-form button:active { transform: scale(0.98); }