* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  background: #f0f3f8;
  color: #1b2733;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
header h1 { margin: 0 0 4px; font-size: 24px; color: #2b4a7a; }
.sub { margin: 0 0 20px; color: #5c6b7a; font-size: 14px; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  padding: 10px 18px; border: none; border-radius: 8px 8px 0 0;
  background: #d8e1ef; color: #2b4a7a;
  font-size: 15px; cursor: pointer;
}
.tab.active { background: #4472c4; color: #fff; font-weight: 600; }
.tab:disabled { opacity: .5; cursor: not-allowed; }

.panel {
  background: #fff; border-radius: 0 12px 12px 12px;
  padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.req { color: #d64545; }
.field input[type=file], .field input[type=text] {
  width: 100%; padding: 9px 10px; border: 1px solid #cbd5e1;
  border-radius: 8px; font-size: 14px; background: #fbfcfe;
}

.run-btn {
  width: 100%; padding: 13px; margin-top: 4px; border: none; border-radius: 10px;
  background: #2e7d32; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.run-btn:disabled { background: #9bb0c4; cursor: not-allowed; }
.run-btn:not(:disabled):hover { background: #276a2a; }

.status { margin-top: 20px; }
.loader-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #5c6b7a; margin-bottom: 10px; }
.loader-row.hidden { display: none; }
.spinner {
  width: 16px; height: 16px; border: 3px solid #cbd5e1; border-top-color: #4472c4;
  border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.log-label { font-size: 13px; font-weight: 600; color: #5c6b7a; }
#log {
  margin-top: 6px; background: #0f1b2d; color: #cfe3ff; border-radius: 8px;
  padding: 12px; min-height: 80px; max-height: 320px; overflow: auto;
  font-size: 13px; white-space: pre-wrap; word-break: break-word;
}
footer { margin-top: 24px; text-align: center; color: #8294a6; }

.hidden { display: none !important; }
.hint { display: block; margin-top: 4px; color: #8294a6; font-size: 12px; }
.panel { border-radius: 12px; }