* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f7fa; color: #333; line-height: 1.6; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
header { text-align: center; margin-bottom: 30px; }
header h1 { font-size: 1.8em; margin-bottom: 8px; }
.badge { display: inline-block; background: #e8f4fd; color: #0366d6; padding: 4px 12px; border-radius: 12px; font-size: 0.85em; }
.subtitle { color: #666; margin-top: 8px; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9em; }
.alert.info { background: #e8f4fd; border: 1px solid #b3d8f0; color: #0366d6; }
.alert.error { background: #fde8e8; border: 1px solid #f5baba; color: #c41e3a; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 600; font-size: 0.9em; margin-bottom: 4px; color: #444; }
input[type="text"], textarea, select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1em; transition: border-color 0.2s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #0366d6; box-shadow: 0 0 0 3px rgba(3,102,214,0.1); }
.platforms { display: flex; gap: 16px; flex-wrap: wrap; }
.checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: normal; }
button { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 1.1em; cursor: pointer; transition: background 0.2s; }
#submitBtn { background: #0366d6; color: white; }
#submitBtn:hover { background: #0256b8; }
#submitBtn:disabled { background: #93b8e8; cursor: not-allowed; }
button.secondary { background: #e8e8e8; color: #333; margin-top: 12px; }
button.secondary:hover { background: #d0d0d0; }
#loading { text-align: center; padding: 40px; }
.spinner { border: 3px solid #e0e0e0; border-top: 3px solid #0366d6; border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
#results { margin-top: 30px; }
.result-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.result-card h3 { margin-bottom: 8px; color: #0366d6; }
.result-card pre { background: #f8f9fa; border: 1px solid #e8e8e8; border-radius: 4px; padding: 12px; font-size: 0.85em; white-space: pre-wrap; overflow-x: auto; }
.result-card .copy-btn { float: right; font-size: 0.8em; padding: 4px 10px; background: #e8e8e8; border: none; border-radius: 4px; cursor: pointer; }
.note { color: #888; font-size: 0.85em; margin-top: 12px; text-align: center; }
footer { text-align: center; color: #999; font-size: 0.8em; margin-top: 50px; padding: 20px; border-top: 1px solid #e0e0e0; }
footer a { color: #0366d6; }
#statsContent { background: #f0f0f0; padding: 12px; border-radius: 4px; font-size: 0.85em; margin-top: 8px; text-align: left; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }