.hs-registration-form,
.hs-dashboard,
.create-need-form { max-width: 600px; margin: 20px 0; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.form-group input[type="checkbox"] { width: auto; margin-right: 5px; }
.form-group input[type="checkbox"] + label { display: inline; font-weight: normal; margin-left: 5px; }
.need-item, .public-need-item { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px; background: #f9f9f9; }
.need-item h5, .public-need-item h4 { margin-top: 0; color: #333; }
.support-need-btn { background: #0073aa; color: white; padding: 8px 15px; border: none; border-radius: 3px; cursor: pointer; font-size: 14px; }
.support-need-btn:hover { background: #005a87; }
.hero-section, .supporter-section { margin-bottom: 30px; padding: 20px; background: #fff; border: 1px solid #ddd; border-radius: 5px; }
.hero-section h3, .supporter-section h3 { margin-top: 0; color: #0073aa; border-bottom: 2px solid #0073aa; padding-bottom: 10px; }
.needs-list, .available-needs { display: grid; gap: 15px; margin-top: 20px; }
.public-needs-list { max-width: 800px; }
.public-needs-list h3 { color: #333; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
button[type="submit"], .button-primary { background: #0073aa; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer; font-size: 14px; }
button[type="submit"]:hover, .button-primary:hover { background: #005a87; }
@media (max-width: 768px) { .hs-registration-form, .hs-dashboard, .create-need-form { max-width: 100%; padding: 0 10px; } .form-group input, .form-group select, .form-group textarea { font-size: 16px; } .need-item, .public-need-item { padding: 10px; } .hero-section, .supporter-section { padding: 15px; margin-bottom: 20px; } }
.hs-loading { opacity: 0.6; pointer-events: none; }
.hs-loading:after { content: " Loading..."; color: #666; }
.hs-message { padding: 12px; border-radius: 4px; margin: 10px 0; }
.hs-message.success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.hs-message.error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }