.feedback-page {
width: 1000px; margin: 0 auto; padding: 20px;
}
.feedback-page h1 {
font-size: 2rem; margin-bottom: 30px; color: #fff;
border-bottom: 2px solid #4a90e2; padding-bottom: 10px;
}
#feedback-form {
background: #26314e; padding: 30px; border-radius: 8px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block; color: #eec; margin-bottom: 8px; font-weight: bold;
}
.form-group input,
.form-group textarea {
width: 100%; padding: 12px; border: 1px solid #4a6fa5;
border-radius: 4px; background: #1a1a2e; color: #eee;
font-size: 14px; font-family: sans-serif;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none; border-color: #4a90e2; box-shadow: 0 0 5px rgba(74,144,226,0.5);
}
.form-group textarea {
resize: vertical; min-height: 120px;
}
.char-count {
display: block; text-align: right; color: #aaa; font-size: 12px; margin-top: 5px;
}
.submit-btn {
width: 100%; padding: 14px; background: #007bff; color: #fff;
border: none; border-radius: 4px; font-size: 16px; cursor: pointer;
transition: background 0.2s;
}
.submit-btn:hover { background: #0056b3; }
.error-message {
background: rgba(220,53,69,0.2); border: 1px solid #dc3545;
color: #ff6b6b; padding: 15px; border-radius: 4px; margin-bottom: 20px;
}
.success-message {
background: #26314e; padding: 30px; border-radius: 8px; text-align: center;
}
.success-message h2 { color: #28a745; margin-bottom: 15px; }
.success-message p { color: #ccc; margin-bottom: 20px; }
.back-btn {
padding: 8px 16px; background: #007bff; color: #fff;
text-decoration: none; border-radius: 4px;
}
.back-btn:hover { background: #0056b3; }

@media (max-width: 1024px) {
.feedback-page { width: 100%; padding: 10px; }
#feedback-form { padding: 20px; }
}