@layer components {
    .cf-group { margin-bottom: var(--space-4); }
    .cf-label { display: block; font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-1); color: var(--steel-700); }
    .cf-label .req { color: var(--danger); }
    .cf-input, .cf-textarea {
        width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--steel-300);
        border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--bg);
        transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
        box-sizing: border-box; font-family: inherit;
    }
    .cf-input:focus, .cf-textarea:focus {
        outline: none; border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }
    .cf-textarea { resize: vertical; min-height: 100px; }
    .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .cf-submit {
        display: block; width: 100%; padding: 13px; border: none; border-radius: var(--radius-md);
        background: var(--primary-600); color: var(--bg); font-size: var(--text-sm); font-weight: 600;
        cursor: pointer; transition: background var(--duration-fast);
    }
    .cf-submit:hover { background: var(--primary-700); }
    .cf-error { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-1); }
    .cf-success {
        background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success);
        padding: var(--space-3) 18px; border-radius: var(--radius-md); margin-bottom: 18px; font-size: var(--text-sm);
    }
    .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
    @media (max-width: 768px) {
        .cf-row { grid-template-columns: 1fr; }
    }
}