/* Help page styles - flat, simple, light, professional */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; min-height: 100vh; }
header { background-color: #fff; padding: 30px 20px; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.header-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.brand-logo { width: 64px; height: 64px; border-radius: 8px; }
.header-text { text-align: left; }
header h1 { font-size: 28px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }
header p { font-size: 14px; color: #7f8c8d; }
.container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: 1fr 400px; gap: 30px; }
.qa-section { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.qa-section h2 { font-size: 22px; font-weight: 600; color: #2c3e50; margin-bottom: 25px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; }
.qa-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f0f0f0; }
.qa-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.qa-item ul, .qa-item ol { padding-left: 40px; font-size: 14px;}
.qa-item h3 { font-size: 16px; font-weight: 600; color: #34495e; margin-bottom: 10px; }
.qa-item p { font-size: 14px; color: #555; line-height: 1.6; }
.qa-item a { color: #3498db; text-decoration: none; }
.qa-item a:hover { text-decoration: underline; }
.feedback-section { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); height: fit-content; position: sticky; top: 20px; }
.feedback-section h2 { font-size: 20px; font-weight: 600; color: #2c3e50; margin-bottom: 12px; }
.feedback-description { font-size: 13px; color: #7f8c8d; margin-bottom: 25px; line-height: 1.5; }
.form-group { margin-bottom: 20px; }
label { display: block; font-size: 14px; font-weight: 500; color: #34495e; margin-bottom: 6px; }
.required { color: #e74c3c; }
input[type="email"], textarea { width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; border: 1px solid #ddd; border-radius: 4px; background-color: #fafafa; transition: all 0.2s; }
input[type="email"]:focus, textarea:focus { outline: none; border-color: #3498db; background-color: #fff; box-shadow: 0 0 0 3px rgba(52,152,219,0.1); }
textarea { resize: vertical; min-height: 120px; }
.char-count { text-align: right; font-size: 12px; color: #95a5a6; margin-top: 4px; }
button[type="submit"] { width: 100%; padding: 12px 20px; font-size: 15px; font-weight: 600; color: #fff; background-color: #3498db; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
button[type="submit"]:hover:not(:disabled) { background-color: #2980b9; }
button[type="submit"]:disabled { background-color: #95a5a6; cursor: not-allowed; }
.message { margin-top: 15px; padding: 12px; border-radius: 4px; font-size: 14px; text-align: center; }
.message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.message.hidden { display: none; }
@media (max-width: 968px) { .container { grid-template-columns: 1fr; gap: 20px; } .feedback-section { position: static; } }
@media (max-width: 640px) { header { padding: 20px 15px; } .header-content { gap: 15px; } .brand-logo { width: 48px; height: 48px; } header h1 { font-size: 22px; } .container { padding: 20px 15px; } .qa-section, .feedback-section { padding: 20px; } }