:root {
--spa-primary-color: #4CAF50;
--spa-button-color: #4CAF50;
--spa-text-color: #1f2937;
--spa-card-bg: #ffffff;
--spa-border-color: #e5e7eb;
--spa-bg-color: #f9fafb;
} .spa-form-wrapper {
max-width: 640px;
margin: 40px auto;
padding: 24px;
background: var(--spa-bg-color);
border-radius: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--spa-text-color);
} .spa-form-header {
text-align: center;
margin-bottom: 32px;
}
.spa-form-header h2 {
font-size: 1.6rem;
margin-bottom: 8px;
font-weight: 700;
}
.spa-form-header p {
font-size: 0.95rem;
color: #6b7280;
} .spa-form {
display: flex;
flex-direction: column;
gap: 20px;
} .spa-card {
background: var(--spa-card-bg);
border: 1px solid var(--spa-border-color);
border-radius: 14px;
padding: 18px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spa-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
} .spa-label {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.spa-description {
display: block;
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 10px;
} .spa-input,
.spa-card select,
.spa-card textarea {
width: 100%;
padding: 12px 14px;
font-size: 0.95rem;
border-radius: 10px;
border: 1px solid var(--spa-border-color);
outline: none;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spa-input:focus,
.spa-card select:focus,
.spa-card textarea:focus {
border-color: var(--spa-primary-color);
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
} .spa-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.spa-option {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.spa-option input {
accent-color: var(--spa-primary-color);
} .spa-submit {
margin-top: 10px;
padding: 16px;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: var(--spa-button-color);
border: none;
border-radius: 14px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.spa-submit:hover {
transform: translateY(-1px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
filter: brightness(1.05);
} .spa-result {
margin-top: 30px;
}