* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f7fa; min-height: 100vh; padding: 0 20px 40px; }
nav { display: flex; gap: 0; max-width: 640px; margin: 0 auto; padding-top: 20px; }
nav a { flex: 1; text-align: center; padding: 10px; background: #e8ecf1; color: #555; text-decoration: none; font-size: 14px; font-weight: 500; transition: all .2s; }
nav a:first-child { border-radius: 8px 0 0 0; }
nav a:last-child { border-radius: 0 8px 0 0; }
nav a.active { background: #4f6ef7; color: #fff; }
nav a:hover:not(.active) { background: #d5dbe5; }
.container { max-width: 640px; margin: 0 auto; background: #fff; padding: 28px; border-radius: 0 0 8px 8px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
h1 { font-size: 20px; margin-bottom: 24px; color: #1a1a1a; }
label { display: block; font-size: 14px; font-weight: 500; color: #333; margin-bottom: 6px; }
.form-group { margin-bottom: 18px; }
.form-group small { color: #999; font-size: 12px; }
input[type="text"], input[type="password"], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 6px;
  font-size: 14px; outline: none; transition: border-color .2s; background: #fff;
}
input:focus, textarea:focus, select:focus { border-color: #4f6ef7; }
textarea { resize: vertical; min-height: 100px; }
.upload-area {
  border: 2px dashed #d9d9d9; border-radius: 8px; padding: 32px; text-align: center;
  cursor: pointer; transition: border-color .2s; color: #999; position: relative;
}
.upload-area:hover { border-color: #4f6ef7; }
.upload-area input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.preview-img { max-width: 100%; max-height: 200px; margin-top: 12px; border-radius: 6px; }
.row { display: flex; gap: 12px; }
.row .form-group { flex: 1; }
button.submit {
  width: 100%; padding: 12px; background: #4f6ef7; color: #fff; border: none;
  border-radius: 6px; font-size: 15px; cursor: pointer; transition: background .2s;
}
button.submit:hover { background: #3b5de7; }
button.submit:disabled { background: #a0b0f0; cursor: not-allowed; }
.btn-link { background: none; border: none; color: #4f6ef7; cursor: pointer; font-size: 13px; margin-top: 6px; }
.status-box { margin-top: 20px; padding: 16px; background: #fafafa; border-radius: 8px; border: 1px solid #e8e8e8; display: none; }
.status-box.show { display: block; }
.status-value { font-size: 14px; color: #1a1a1a; word-break: break-all; line-height: 1.6; }
.status-value.error { color: #e53e3e; }
.status-value.success { color: #38a169; }
.status-value a { color: #4f6ef7; }
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
video { width: 100%; border-radius: 8px; margin-top: 12px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #4f6ef7; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.task-list { list-style: none; }
.task-item { padding: 14px; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 10px; background: #fafafa; }
.task-item .task-id { font-family: monospace; font-size: 13px; color: #4f6ef7; cursor: pointer; }
.task-item .task-meta { font-size: 12px; color: #999; margin-top: 4px; }
.task-item .task-status { margin-top: 8px; font-size: 14px; }
.query-input { display: flex; gap: 8px; margin-bottom: 20px; }
.query-input input { flex: 1; }
.query-input button { white-space: nowrap; padding: 10px 20px; background: #4f6ef7; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.query-input button:hover { background: #3b5de7; }

.page-btn { padding: 6px 16px; background: #4f6ef7; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
.page-btn:hover { background: #3b5de7; }
.video-slot { }

.mode-selector, .duration-mode { display: flex; gap: 8px; margin-top: 8px; }
.mode-option, .duration-option { flex: 1; }
.mode-option input, .duration-option input { display: none; }
.mode-option span, .duration-option span { 
  display: block; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px; 
  text-align: center; cursor: pointer; transition: all .2s; font-size: 13px;
}
.mode-option input:checked + span, .duration-option input:checked + span { 
  background: #4f6ef7; color: #fff; border-color: #4f6ef7; 
}
.mode-option span:hover, .duration-option span:hover { border-color: #4f6ef7; }

input[type="range"] { 
  width: 100%; height: 6px; border-radius: 3px; background: #e8e8e8; 
  outline: none; -webkit-appearance: none; 
}
input[type="range"]::-webkit-slider-thumb { 
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; 
  background: #4f6ef7; cursor: pointer; 
}
input[type="range"]::-moz-range-thumb { 
  width: 16px; height: 16px; border-radius: 50%; background: #4f6ef7; 
  cursor: pointer; border: none; 
}

.btn-secondary { 
  padding: 10px 16px; background: #f0f0f0; color: #333; border: none; 
  border-radius: 6px; cursor: pointer; font-size: 14px; transition: background .2s; 
}
.btn-secondary:hover { background: #e0e0e0; }

.advanced-settings { 
  margin: 16px 0; padding: 12px; background: #fafafa; border: 1px solid #e8e8e8; 
  border-radius: 8px; 
}
.advanced-settings summary { 
  cursor: pointer; font-weight: 500; color: #333; list-style: none; 
  user-select: none; 
}
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-content { margin-top: 12px; }

.action-btn { 
  display: inline-block; padding: 6px 12px; background: #4f6ef7; color: #fff; 
  border: none; border-radius: 4px; cursor: pointer; font-size: 13px; 
  text-decoration: none; transition: background .2s; 
}
.action-btn:hover { background: #3b5de7; }
.action-btn.danger { background: #e53e3e; }
.action-btn.danger:hover { background: #c53030; }

.audio-sync-badge { 
  display: inline-block; padding: 4px 8px; background: #38a169; color: #fff; 
  border-radius: 4px; font-size: 12px; margin-bottom: 8px; 
}