:root {
  --bg: #f2f2f2;
  --panel: #ffffff;
  --border: #111111;
  --text: #111111;
  --muted: #5a5a5a;
  --blue: #bddbe7;
  --green: #dff1db;
  --red: #f7d8d8;
  --red-text: #8f1d1d;
  --grey: #ececec;
  --yellow: #f0cf74;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}
button, input, select {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
button { cursor: pointer; padding: 9px 14px; font-weight: 700; }
input, select { width: 100%; padding: 8px 10px; }
a { color: #0b51c5; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; }
.app-shell { min-height: 100vh; padding: 10px; display: grid; gap: 10px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.brand-block { display: flex; gap: 12px; align-items: center; }
.brand-logo { width: 60px; height: 60px; object-fit: contain; }
.brand-title { font-size: 28px; font-weight: 700; }
.brand-subtitle { font-size: 19px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; }
.content-grid { display: grid; gap: 10px; }
.single-column { grid-template-columns: 1fr; }
.stage-panel, .debug-panel { padding: 14px; min-width: 0; }
.panel-title { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.section-title, .box-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.small-text { font-size: 14px; line-height: 1.4; }
.muted { color: var(--muted); }
.inputs-grid, .artifact-list, .kv-list { display: grid; gap: 8px; }
.upload-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
}
.upload-actions { display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
.upload-actions input[type='file'] { flex: 1 1 auto; }
.meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.state-box, .artifact-card, .run-card, .kv-item {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}
.state-box.info { background: #eef6fa; }
.state-box.warn { background: #fff3d6; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.primary { background: #fff; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 5px; max-width: 100%; }
.table-wrap table { width: max-content; min-width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid #d7d7d7; padding: 8px; text-align: left; vertical-align: top; font-size: 14px; }
.table-wrap th { background: #f0f0f0; position: sticky; top: 0; z-index: 1; }
.preview-table-wrap { max-height: 70vh; }
.preview-table-wrap table { min-width: 1500px; }
.resolution-row.row-existing { background: var(--grey); color: #666; }
.resolution-row.row-unresolved { background: #fffafa; }
.resolution-row.row-highlight { outline: 2px solid var(--red-text); outline-offset: -2px; }
.resolution-select.select-suggested, .resolution-select.select-unresolved { background: var(--red); color: var(--red-text); }
.resolution-select.select-resolved { background: var(--green); color: #166116; }
.resolution-select.select-create { background: var(--blue); }
.badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; }
.badge.active { background: var(--blue); }
.badge.warn { background: var(--yellow); }
.badge.error { background: var(--red); color: #fff; }
.debug-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.diagnostics-box { border: 1px solid var(--border); border-radius: 5px; padding: 10px; min-height: 120px; max-height: 380px; overflow: auto; background: #fff; }
.kv-item .label { display: block; font-size: 12px; color: var(--muted); }
.kv-item .value { font-weight: 700; }
.hidden { display: none !important; }
@media (max-width: 1000px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .debug-grid { grid-template-columns: 1fr; }
  .upload-row { grid-template-columns: 1fr; }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(230, 230, 230, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 34px;
}
.loading-text {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.loading-spinner {
  position: relative;
  width: 140px;
  height: 140px;
}
.loading-spinner span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 44px;
  margin: -22px 0 0 -9px;
  border-radius: 999px;
  background: #404040;
  transform-origin: 50% 70px;
  animation: loading-fade 1.2s linear infinite;
}
.loading-spinner span:nth-child(1) { transform: rotate(0deg) translateY(-48px); animation-delay: -1.08s; }
.loading-spinner span:nth-child(2) { transform: rotate(36deg) translateY(-48px); animation-delay: -0.96s; }
.loading-spinner span:nth-child(3) { transform: rotate(72deg) translateY(-48px); animation-delay: -0.84s; }
.loading-spinner span:nth-child(4) { transform: rotate(108deg) translateY(-48px); animation-delay: -0.72s; }
.loading-spinner span:nth-child(5) { transform: rotate(144deg) translateY(-48px); animation-delay: -0.60s; }
.loading-spinner span:nth-child(6) { transform: rotate(180deg) translateY(-48px); animation-delay: -0.48s; }
.loading-spinner span:nth-child(7) { transform: rotate(216deg) translateY(-48px); animation-delay: -0.36s; }
.loading-spinner span:nth-child(8) { transform: rotate(252deg) translateY(-48px); animation-delay: -0.24s; }
.loading-spinner span:nth-child(9) { transform: rotate(288deg) translateY(-48px); animation-delay: -0.12s; }
.loading-spinner span:nth-child(10) { transform: rotate(324deg) translateY(-48px); animation-delay: 0s; }
@keyframes loading-fade {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}

.row-remove-cell { width: 44px; min-width: 44px; text-align: center; }
.row-remove-btn { border: 1px solid #333; background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; padding: 6px 8px; }
.row-remove-btn:hover { background: #f2f2f2; }