*{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#0f1117;
  color:#e0e0e0;
  font-size:14px;
}

a{color:#5c9cf5;text-decoration:none}
a:hover{text-decoration:underline}

/* ── Layout ─────────────────────────────────────────────────────── */
#app{display:flex;flex-direction:column;min-height:100vh}

nav{
  display:flex;align-items:center;gap:24px;
  padding:0 20px;height:52px;
  background:#161822;border-bottom:1px solid #2a2d3a;
  flex-shrink:0;
}
nav .brand{font-weight:700;font-size:16px;color:#f0f0f0;margin-right:8px}
nav a{font-size:13px;color:#8890a4}
nav a:hover,nav a.active{color:#e0e0e0;text-decoration:none}

main{flex:1;padding:24px 32px;max-width:1100px;width:100%}

footer{
  padding:10px 32px;font-size:11px;color:#555;
  border-top:1px solid #1e2130;
}

/* ── Cards / Panels ─────────────────────────────────────────────── */
.card{
  background:#1e2130;border:1px solid #2a2d3a;border-radius:8px;
  padding:20px;margin-bottom:20px;
}
.card h2{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:#8890a4;margin-bottom:14px}

/* ── Tables ─────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px 12px;color:#8890a4;font-weight:500;border-bottom:1px solid #2a2d3a}
td{padding:8px 12px;border-bottom:1px solid #1a1d2b;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#252838}

/* ── Badges ─────────────────────────────────────────────────────── */
.badge{
  display:inline-block;padding:2px 8px;border-radius:10px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.badge-queued   {background:#2a2d3a;color:#8890a4}
.badge-running  {background:#2d2400;color:#ff9800}
.badge-complete, .badge-completed {background:#1a2e1a;color:#4caf50}
.badge-failed   {background:#2e1a1a;color:#f44336}
.badge-cancelled{background:#2a2d3a;color:#8890a4}

/* ── Forms ──────────────────────────────────────────────────────── */
.form-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.form-row > div{display:flex;flex-direction:column}
label{font-size:12px;color:#8890a4;display:block;margin-bottom:4px;min-height:16px}
input[type=text],input[type=file],textarea,select{box-sizing:border-box;height:34px}
textarea{height:auto}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8890a4 50%),linear-gradient(135deg,#8890a4 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
input[type=text],input[type=file],textarea,select{
  background:#12141e;border:1px solid #2a2d3a;color:#e0e0e0;
  border-radius:4px;padding:7px 10px;font-size:13px;font-family:inherit;
  outline:none;width:100%;
}
input[type=text]:focus,textarea:focus,select:focus{border-color:#5c9cf5}
textarea{resize:vertical;min-height:80px;font-family:'Cascadia Code','Fira Code',monospace;font-size:12px}

/* ── Buttons ─────────────────────────────────────────────────────── */
button,.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:4px;border:none;cursor:pointer;
  font-size:13px;font-family:inherit;font-weight:500;
  background:#252838;color:#e0e0e0;transition:background .15s;
}
button:hover,.btn:hover{background:#2e3347}
.btn-primary{background:#1a3a6a;color:#5c9cf5}
.btn-primary:hover{background:#1e4480}
.btn-danger{background:#3a1a1a;color:#f44336}
.btn-danger:hover{background:#4a1a1a}

/* ── Log pane ────────────────────────────────────────────────────── */
#log-pane{
  font-family:'Cascadia Code','Fira Code',monospace;font-size:11px;
  background:#12141e;padding:12px;border-radius:6px;
  height:340px;overflow-y:auto;line-height:1.7;color:#8890a4;
}
#log-pane .entry{white-space:pre-wrap;word-break:break-all}
.log-warn{color:#ff9800}
.log-ok  {color:#4caf50}
.log-info{color:#5c9cf5}

/* ── Status indicators ───────────────────────────────────────────── */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot-ok     {background:#4caf50}
.dot-warn   {background:#ff9800}
.dot-err    {background:#f44336}
.dot-idle   {background:#555}

/* ── Error banner ────────────────────────────────────────────────── */
.error-banner{
  background:#2e1a1a;border:1px solid #4a1a1a;border-radius:6px;
  padding:12px 16px;color:#f44336;font-size:13px;margin-bottom:16px;
}

/* ── Configurator ────────────────────────────────────────────────── */
.cfg-tabs{
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid #2a2d3a;margin-bottom:12px;padding-bottom:0;
}
.cfg-tab{
  background:transparent;color:#8890a4;
  border:none;border-bottom:2px solid transparent;
  border-radius:0;padding:8px 14px;
  font-size:13px;font-weight:500;cursor:pointer;
  margin-bottom:-1px;
}
.cfg-tab:hover{background:transparent;color:#e0e0e0}
.cfg-tab-active{color:#5c9cf5;border-bottom-color:#5c9cf5}
.cfg-upload-label{cursor:pointer}

.cfg-section{
  border:1px solid #2a2d3a;border-radius:6px;
  padding:14px 16px;margin-bottom:14px;
}
.cfg-section legend{
  padding:0 6px;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;color:#5c9cf5;
}
.cfg-hint{
  font-size:12px;color:#8890a4;line-height:1.45;
  margin:-4px 0 12px 0;
}
.cfg-hint code{
  font-family:'Cascadia Code','Fira Code',monospace;font-size:11px;
  background:#12141e;padding:1px 5px;border-radius:3px;color:#a0d4ff;
}
.cfg-help{
  display:block;font-size:11px;color:#6c7287;
  margin-top:4px;line-height:1.45;
}
.cfg-weights-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px 14px;
}
.cfg-field-row, .cfg-objective-row{
  border:1px solid #1e2130;border-radius:4px;
  padding:8px 10px 6px;margin-bottom:6px;
}

.cfg-details{padding:0}
.cfg-details summary{
  cursor:pointer;list-style:none;
  padding:14px 16px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;
  color:#5c9cf5;
  border-radius:6px;
}
.cfg-details summary::-webkit-details-marker{display:none}
.cfg-details summary::before{
  content:'\25B8';display:inline-block;
  margin-right:8px;color:#8890a4;
  transition:transform .15s;
}
.cfg-details[open] summary::before{transform:rotate(90deg)}
.cfg-details[open]{padding:0 16px 14px}
.cfg-details[open] summary{padding:14px 0}

.cfg-subhead{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  color:#8890a4;margin:14px 0 8px;
}
.cfg-subhead-2{
  font-size:11px;font-weight:500;color:#8890a4;
  margin:10px 0 4px;
}

/* ── Dark-mode friendly adjustments ─────────────────────────────── */
@media (prefers-color-scheme: light) {
  html,body{background:#f4f6fa;color:#1a1d2b}
  nav{background:#fff;border-color:#d0d5e0}
  .card{background:#fff;border-color:#d0d5e0}
  th{color:#555}
  td{border-color:#eee}
  tr:hover td{background:#f8f9ff}
  input[type=text],input[type=file],textarea,select{background:#fff;border-color:#d0d5e0;color:#1a1d2b}
  button,.btn{background:#e8eaf0;color:#1a1d2b}
  #log-pane{background:#f0f2f8;color:#555}
  footer{color:#aaa;border-color:#e0e3ea}
  .cfg-tabs{border-color:#d0d5e0}
  .cfg-tab{color:#555}
  .cfg-tab:hover{color:#1a1d2b}
  .cfg-section{border-color:#d0d5e0}
  .cfg-hint{color:#555}
  .cfg-hint code{background:#f0f2f8;color:#1a4480}
  .cfg-help{color:#777}
  .cfg-field-row{border-color:#e0e3ea}
}