/* ─── RUN MODEL PAGE HI-FI ──────────────────────────── */

/* Settings card two-col */
.model-settings-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-bottom:20px;
}

/* Slider hi-fi */
.slider-field-wrap { display:flex; flex-direction:column; gap:6px; }
.slider-label-row  { display:flex; align-items:center; gap:0; }
.slider-track-wrap {
  position:relative; padding:6px 0 0;
}
input[type=range].model-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:5px; border-radius:3px; outline:none; cursor:pointer;
  background:linear-gradient(to right, var(--blue) 80%, #E2E8F0 80%);
  transition:background .1s;
}
input[type=range].model-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2.5px solid var(--blue);
  box-shadow:0 1px 4px rgba(0,100,164,.25);
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
input[type=range].model-slider::-webkit-slider-thumb:hover {
  transform:scale(1.2); box-shadow:0 2px 8px rgba(0,100,164,.35);
}
.slider-val-pill {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff;
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px;
  min-width:46px; text-align:center; margin-top:8px;
  transition:background .15s;
}
.slider-hint { font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.45; }

/* Batch size select hi-fi */
.model-select {
  width:100%; border:1.5px solid var(--border); border-radius:10px;
  padding:10px 14px; font-size:13.5px; font-family:'Inter',sans-serif;
  color:var(--text); background:var(--card); outline:none; cursor:pointer;
  transition:border-color .18s, box-shadow .18s; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:34px;
}
.model-select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,100,164,.1); }

/* Run button */
.run-model-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:10px; border:none;
  font-size:14px; font-weight:600; font-family:'Inter',sans-serif;
  cursor:pointer; transition:background .18s, box-shadow .18s, transform .12s;
}
.run-model-btn.idle {
  background:#276749; color:#fff;
}
.run-model-btn.idle:hover { background:#22543D; box-shadow:0 4px 14px rgba(39,103,73,.35); }
.run-model-btn.running { background:#E53E3E; color:#fff; }
.run-model-btn.running:hover { background:#C53030; box-shadow:0 4px 14px rgba(229,62,62,.3); }
.run-model-btn:active { transform:scale(.97); }
.run-btn-icon { display:inline-flex; transition:transform .2s; }
.run-model-btn.idle:hover .run-btn-icon { transform:scale(1.15); }

/* Progress panel */
.run-progress-panel {
  margin-top:18px; padding:18px 20px;
  background:#F0F7FF; border:1.5px solid #BEE3F8;
  border-radius:14px; animation:pageFade .3s ease;
}
.run-progress-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.run-progress-label {
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--blue);
}
.run-progress-eta { font-size:12px; color:var(--muted); }

.run-prog-track {
  height:8px; background:#BEE3F8; border-radius:4px; overflow:hidden; margin-bottom:14px;
}
.run-prog-fill {
  height:100%; background:var(--blue); border-radius:4px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
}
.run-prog-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmer 2s ease-in-out infinite;
}
.run-stat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.run-stat-cell {
  background:#fff; border:1px solid #BEE3F8; border-radius:10px;
  padding:10px 12px; text-align:center;
}
.run-stat-cell-val { font-size:17px; font-weight:700; color:var(--dark); line-height:1; }
.run-stat-cell-lbl { font-size:11px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }

/* Run History table polish */
.run-history-table { width:100%; border-collapse:collapse; }
.run-history-table th {
  text-align:left; padding:10px 16px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); border-bottom:1.5px solid var(--border);
  background:#FAFBFC;
}
.run-history-table th:first-child { border-radius:8px 0 0 0; }
.run-history-table th:last-child  { border-radius:0 8px 0 0; }
.run-history-table td {
  padding:12px 16px; font-size:13px;
  border-bottom:1px solid var(--border); color:var(--text);
  transition:background .12s;
}
.run-history-table tbody tr:last-child td { border-bottom:none; }
.run-history-table tbody tr:hover td { background:#F7FAFC; }
.run-history-table .batch-num { font-weight:600; color:var(--dark); font-size:13px; }
.run-history-table .failure-zero { color:var(--muted); }
.run-history-table .failure-warn { color:#C05621; font-weight:600; }

/* Run history expandable detail rows */
.rh-detail-row { display:none; }
.rh-detail-row.open { display:table-row; }
.rh-detail-row td { padding:0 !important; border-bottom:1px solid var(--border) !important; background:#FAFCFF !important; }
.rh-detail-inner { padding:16px 20px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.rh-detail-section { min-width:0; }
.rh-detail-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:7px; }
.rh-detail-stat { font-size:13px; color:var(--text); font-weight:500; margin-bottom:3px; }
.rh-detail-stat span { color:var(--muted); font-weight:400; }
.rh-detail-cam-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600;
  margin:0 4px 4px 0;
}
.rh-detail-cam-badge.ok   { background:#F0FFF4; color:#276749; border:1.5px solid #9AE6B4; }
.rh-detail-cam-badge.skip { background:#F7FAFC; color:var(--muted); border:1.5px solid var(--border); }
.rh-expand-btn {
  background:none; border:none; cursor:pointer; padding:4px 8px;
  color:var(--blue); font-size:12px; font-weight:600;
  font-family:'Inter',sans-serif; display:inline-flex; align-items:center; gap:5px;
  border-radius:6px; transition:background .15s;
}
.rh-expand-btn:hover { background:#EBF8FF; }
.rh-expand-btn svg { transition:transform .2s; }
.rh-expand-btn.open svg { transform:rotate(180deg); }

/* Processing pulse dot */
@keyframes proc-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.proc-dot {
  width:8px; height:8px; border-radius:50%; background:var(--blue);
  animation:proc-pulse 1.4s ease-in-out infinite; flex-shrink:0;
}

/* Slider range labels (Low / High) */
.slider-range-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; gap:8px;
}
.slider-range-label {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:500; padding:3px 9px; border-radius:20px;
}
.slider-range-label-low  { background:#FFF5F5; color:#C53030; }
.slider-range-label-high { background:#F0FFF4; color:#276749; }
.slider-range-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.slider-range-dot-low  { background:#FC8181; }
.slider-range-dot-high { background:#68D391; }
.slider-range-sub {
  font-size:10.5px; font-weight:400; opacity:.75; margin-left:1px;
}