.gpt-plg-container {
max-width: 800px;
margin: 30px auto;
padding: 20px;
border: 1px solid #e2e2e2;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#gpt-plg-form {
display: flex;
flex-direction: column;
}
.gpt-plg-form-row {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.gpt-plg-form-group {
flex: 1;
min-width: 180px;
display: flex;
flex-direction: column;
}
.gpt-plg-form-group-full {
flex: 1 1 100%;
display: flex;
flex-direction: column;
}
#gpt-plg-form label {
margin-bottom: 5px;
font-weight: bold;
font-size: 14px;
}
#gpt-plg-form input[type="text"],
#gpt-plg-form input[type="number"],
#gpt-plg-form select,
#gpt-plg-form textarea {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s ease;
}
#gpt-plg-form input[type="text"]:focus,
#gpt-plg-form input[type="number"]:focus,
#gpt-plg-form select:focus,
#gpt-plg-form textarea:focus {
border-color: #0073aa;
outline: none;
}
#gpt-plg-form button {
padding: 10px 18px;
background-color: #0073aa;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
align-self: flex-start;
transition: background-color 0.3s ease;
}
#gpt-plg-form button:hover {
background-color: #005177;
}
#gpt-plg-result {
margin-top: 25px;
padding: 18px;
border: 1px solid #0073aa;
border-radius: 4px;
background-color: #f0f8ff;
}
#gpt-plg-result h3 {
margin-top: 0;
color: #0073aa;
}
#gpt-plg-result h4 {
margin-bottom: 5px;
color: #005177;
}
#gpt-plg-result ul {
list-style-type: disc;
margin-left: 20px;
}
#gpt-plg-result p {
margin: 10px 0;
} .spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid rgba(0, 115, 170, 0.3);
border-radius: 50%;
border-top-color: #0073aa;
animation: spin 1s ease-in-out infinite;
vertical-align: middle;
margin-left: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
} @media (max-width: 600px) {
.gpt-plg-form-row {
flex-direction: column;
}
.gpt-plg-form-group,
.gpt-plg-form-group-full {
min-width: 100%;
}
}