* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
max-width: 1200px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.card {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

h1 {
color: #667eea;
margin-bottom: 10px;
font-size: 24px;
}

h2 {
color: #333;
margin-bottom: 20px;
font-size: 20px;
}

.subtitle {
color: #666;
margin-bottom: 25px;
font-size: 14px;
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}

input, select {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}

input:focus, select:focus {
outline: none;
border-color: #667eea;
}

button {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}

button:hover {
transform: translateY(-2px);
}

button:active {
transform: translateY(0);
}

.alert {
padding: 15px;
border-radius: 6px;
margin-top: 20px;
display: none;
}

.alert.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}

.alert.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

.api-key-display {
background: #f8f9fa;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
word-break: break-all;
font-family: monospace;
display: none;
}

.endpoint-list {
list-style: none;
margin-top: 20px;
}

.endpoint-list li {
background: #f8f9fa;
padding: 15px;
margin-bottom: 10px;
border-radius: 6px;
border-left: 4px solid #667eea;
}

.method {
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
margin-right: 10px;
}

.method.get { background: #28a745; color: white; }
.method.post { background: #007bff; color: white; }
.method.put { background: #ffc107; color: #333; }
.method.delete { background: #dc3545; color: white; }

.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 6px;
margin-top: 10px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 13px;
}

textarea {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 14px;
font-family: monospace;
min-height: 100px;
}

.test-result {
background: #f8f9fa;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
display: none;
max-height: 300px;
overflow-y: auto;
}

@media (max-width: 768px) {
.container {
    grid-template-columns: 1fr;
}
}