* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #f5f6f8;
  color: #1f2430;
}
.app { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
header h1 { margin: 0 0 4px; font-size: 22px; }
header .sub { margin: 0 0 20px; color: #666; font-size: 13px; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid #dfe2e8; }
.tab-btn {
  background: none; border: none; padding: 10px 16px; cursor: pointer;
  font-size: 14px; color: #666; border-bottom: 2px solid transparent;
}
.tab-btn.active { color: #2358d6; border-bottom-color: #2358d6; font-weight: 600; }

.tab-panel { display: none; background: #fff; border: 1px solid #e4e6eb; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.tab-panel.active { display: block; }
.tab-panel h2 { margin-top: 0; font-size: 16px; }
.hint { color: #888; font-size: 13px; margin: 4px 0 12px; }

textarea, input[type=text], input[type=number] {
  width: 100%; padding: 8px 10px; border: 1px solid #d6d9e0; border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
.field { margin-bottom: 12px; max-width: 260px; }
.field.field-wide { max-width: none; }
.field label { display: block; font-size: 12px; color: #555; margin-bottom: 4px; }

.platform-selector { display: flex; flex-wrap: wrap; gap: 6px; max-width: 480px; }
.platform-pill {
  background: #f0f1f4; border: 1px solid #e4e6eb; color: #444;
  padding: 5px 12px; border-radius: 14px; font-size: 12px; cursor: pointer;
}
.platform-pill.active { background: #2358d6; border-color: #2358d6; color: #fff; }
.platform-pill-marketplace { border-style: dashed; }
.platform-pill-marketplace::after { content: " \26A0"; }
.platform-pill-marketplace.active { background: #b3261e; border-color: #b3261e; }

.row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
button.primary {
  background: #2358d6; color: #fff; border: none; padding: 9px 20px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
button.primary:hover { background: #1c48b3; }
.estimate { font-size: 13px; color: #666; }

.jobs-section { background: #fff; border: 1px solid #e4e6eb; border-radius: 8px; padding: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eef0f4; }
th { color: #888; font-weight: 500; }

.progress-bar { background: #eef0f4; border-radius: 4px; height: 8px; width: 140px; overflow: hidden; display: inline-block; vertical-align: middle; }
.progress-bar > div { background: #2358d6; height: 100%; }
.status-tag { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.status-pending, .status-paused { background: #fdf3d6; color: #8a6d00; }
.status-running { background: #dbe9ff; color: #1c48b3; }
.status-completed { background: #dff5e1; color: #1c7c34; }
.status-failed { background: #fbe0e0; color: #b3261e; }

.link-btn { background: none; border: none; color: #2358d6; cursor: pointer; font-size: 12px; padding: 0; margin-right: 8px; }
.link-btn-danger { color: #b3261e; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { background: #fff; border-radius: 8px; padding: 20px; width: 600px; max-height: 70vh; overflow: auto; }