label {
    display: block;
    font-size: 12px;
    color: var(--muted-2);
    letter-spacing: 0.4px;
}

.form-row label {
    min-width: 140px;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
    margin-top: 2px;
} 

.form-control {
    width: 100%;
    background: #0b0f13;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 10px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.form-control::placeholder {
    color: var(--muted-2);
}

.form-control:focus {
    outline: none;
    border-color: rgba(215, 167, 71, 0.6);
    box-shadow: var(--glow);
}

.form-control:disabled,
.form-control[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--glow);
}

select.form-control {
    appearance: none;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted-2) 50%),
        linear-gradient(135deg, var(--muted-2) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.main ul,
.main ol {
    margin: var(--space-3) 0;
    padding-left: 22px;
    color: var(--muted);
}

.main li {
    margin: 6px 0;
}

.main li::marker {
    color: var(--muted-2);
}