body { font-family: sans-serif; max-width: 700px; margin: 30px auto; padding: 0 20px; background: #f5f7fa; }
.container { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
h1 { text-align: center; }
.input-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.input-group input, .input-group textarea { padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
.input-group input[type="number"] { width: 120px; }
button { background: #3b82f6; color: white; border: none; padding: 14px; border-radius: 8px; font-size: 18px; cursor: pointer; width: 100%; }
button:hover { background: #2563eb; }
.loading { text-align: center; padding: 40px; color: #6b7280; }
.result { text-align: center; padding: 20px; background: #f8fafc; border-radius: 12px; }
.result img { max-width: 100%; border-radius: 8px; margin: 10px 0; }
.error { color: #dc2626; background: #fee2e2; padding: 15px; border-radius: 8px; }