body { font-family: Arial, sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; } .container { width: 80%; margin: 20px auto; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; } .header { background-color: #007bff; color: #fff; padding: 15px; text-align: center; font-size: 1.5em; border-top-left-radius: 8px; border-top-right-radius: 8px; } .form-container { padding: 20px; } .form-group { margin-bottom: 15px; } .form-group label { font-weight: bold; } .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .form-group input[type="password"] { font-family: monospace; /* Maintain font style for API key input */ } .form-group button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; } .form-group button:hover { background-color: #0056b3; } .error-message { margin-top: 20px; padding: 15px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 8px; color: #721c24; } .result-table { width: 100%; border-collapse: collapse; margin-top: 20px; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1); border-radius: 8px; } .result-table th, .result-table td { border: 1px solid #ddd; padding: 12px; text-align: left; white-space: nowrap; } .result-table th { background-color: #f2f2f2; } .result-table td { vertical-align: top; } .llm-output { padding: 20px; margin-top: 20px; background-color: #f8f9fa; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .llm-output h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #ddd; } .llm-output pre { white-space: pre-wrap; padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; overflow-x: auto; }