* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #1a1a1a; color: #e0e0e0; font-size: 13px; }
.container { max-width: 900px; margin: 0 auto; padding: 10px; }
h1 { font-size: 16px; margin-bottom: 10px; color: #fff; }
.model-section { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; padding: 8px; background: #252525; border-radius: 6px; }
select, input[type="number"], input[type="text"], textarea, button { font-size: 13px; padding: 6px 10px; border-radius: 4px; border: 1px solid #444; background: #333; color: #e0e0e0; }
select:focus, input:focus, textarea:focus { outline: none; border-color: #5c9eff; }
button { background: #5c9eff; color: #fff; border: none; cursor: pointer; font-weight: 500; }
button:hover { background: #4a8ae6; }
button:disabled { background: #555; cursor: not-allowed; }
.status { font-size: 12px; color: #888; }
.status.success { color: #4caf50; }
.status.error { color: #f44336; }
.progress-bar { position: relative; height: 20px; background: #333; border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #5c9eff, #8ab4ff); width: 0%; transition: width 0.3s ease; }
.progress-fill.gen { background: linear-gradient(90deg, #4caf50, #8bc34a); }
.progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; color: #fff; text-shadow: 0 0 2px #000; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tab { padding: 6px 14px; background: #333; border-radius: 4px 4px 0 0; cursor: pointer; }
.tab.active { background: #5c9eff; color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel { background: #252525; border-radius: 6px; padding: 10px; }
.form-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.form-group { flex: 1; }
.form-group label { display: block; font-size: 11px; color: #888; margin-bottom: 3px; }
.form-group input[type="number"], .form-group input[type="text"], .form-group select, .form-group textarea { width: 100%; }
textarea { resize: vertical; min-height: 50px; }
.output-area { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; background: #1a1a1a; border-radius: 4px; padding: 10px; }
.output-area img { max-width: 100%; max-height: 400px; border-radius: 4px; }
.output-info { font-size: 11px; color: #888; margin-top: 6px; }
.loading { color: #5c9eff; }
.hidden { display: none !important; }
.upload-area { border: 2px dashed #444; border-radius: 4px; padding: 20px; text-align: center; cursor: pointer; }
.upload-area:hover { border-color: #5c9eff; }
.upload-area img { max-width: 100%; max-height: 150px; }
input[type="file"] { display: none; }
.download-btn { margin-top: 8px; padding: 4px 12px; font-size: 12px; background: #4caf50; }
.checkbox-group { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: #5c9eff; }
.checkbox-group label { font-size: 13px; color: #e0e0e0; cursor: pointer; margin: 0; }