/* ── Reset & Base ── */
/* ══════════════════════════════════════════════
   Compute Progress Modal
   Same dark theme as compute-param-modal
   ══════════════════════════════════════════════ */

#compute-modal .modal-err-content {
  position: relative;
  z-index: 1;
  background: #0f1117;
  border: 1px solid #2a2f3e;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  animation: modal-in .18s ease;
  overflow: hidden;
}

/* Status text */
#compute-status {
  font-family: 'Courier New', monospace;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  color: #94a3b8 !important;
  margin-bottom: 16px !important;
}

/* Progress bar container */
#progress-bar-container {
  background-color: #0a0c12 !important;
  border: 1px solid #1e2232;
  border-radius: 6px !important;
  height: 8px !important;
  margin-bottom: 10px !important;
}

/* Progress bar fill */
#progress-bar {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6) !important;
  border-radius: 6px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(59,130,246,.4);
}

/* Percentage */
#progress-percentage {
  font-family: 'Courier New', monospace;
  font-size: 11px !important;
  color: #3b82f6 !important;
  letter-spacing: .1em;
  text-align: center;
}

/* Details log */
#compute-details {
  margin-top: 16px !important;
  font-family: 'Courier New', monospace;
  font-size: 11px !important;
  color: #475569 !important;
  background: #0a0c12;
  border: 1px solid #1e2232;
  border-radius: 5px;
  padding: 10px 12px;
  max-height: 100px;
  overflow-y: auto;
  line-height: 1.6;
}

#compute-details::-webkit-scrollbar { width: 4px; }
#compute-details::-webkit-scrollbar-track { background: transparent; }
#compute-details::-webkit-scrollbar-thumb { background: #1e2232; border-radius: 2px; }

/* Cancel button */
#compute-cancel-btn {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 9px 20px;
  border-radius: 5px;
  border: 1px solid #7f1d1d;
  background-color: #450a0a !important;
  color: #fca5a5;
  cursor: pointer;
  transition: all .15s;
}
#compute-cancel-btn:hover {
  background-color: #7f1d1d !important;
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 12px rgba(239,68,68,.3);
}

/* Close button (× visible on finish) */
.compute-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #475569;
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.compute-close:hover {
  color: #cbd5e1;
  background: #1e2232;
}
  #compute-param-modal *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  #compute-param-modal body {
    font-family: 'Courier New', monospace;
    background: #1a1d23;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  #compute-param-modal button.open-btn {
    padding: 10px 24px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
  }

  /* ── Modal Shell ── */
  #compute-param-modal .modal { display: none; }
  #compute-param-modal .modal.hidden { display: none; }
  #compute-param-modal .modal.visible { display: flex; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center; }

  #compute-param-modal .modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
  }

  /* ── Modal Card ── */
  #compute-param-modal .compute-param-modal-content {
    position: relative;
    z-index: 1;
    width: 620px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border: 1px solid #2a2f3e;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    animation: modal-in .18s ease;
  }

  @keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
  }

  /* ── Header ── */
  #compute-param-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #1e2232;
  }

  #compute-param-modal .modal-header h2 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }


  /* ── Body ── */
  #compute-param-modal .modal-body {
    padding: 22px 22px 0;
  }

  /* ── Section Groups ── */
  #compute-param-modal .param-section {
    margin-bottom: 22px;
  }

  #compute-param-modal .param-section-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #compute-param-modal .param-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc
  }

  /* ── Grid ── */
  #compute-param-modal .param-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #compute-param-modal .param-grid.cols-1 { grid-template-columns: 1fr; }

  /* ── Field ── */
  #compute-param-modal .param-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #compute-param-modal .param-field label {
    font-size: 11px;
    color: #64748b;
    letter-spacing: .04em;
  }

  #compute-param-modal .param-field input[type="number"],
  #compute-param-modal .param-field select {
    background: white;
    border: 1px solid #4a5a7b;
    color : #4a5a7b;
    border-radius: 5px;

    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
  }

  #compute-param-modal .param-field select {
    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='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
  }

  #compute-param-modal .param-field input:focus,
  #compute-param-modal .param-field select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
  }

  /* ── Toggle (checkbox) ── */
  #compute-param-modal .param-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: white;
    border: 1px solid #4a5a7b;
    color : #4a5a7b;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s;
  }
  #compute-param-modal .param-toggle:hover { border-color: #2a3455; }

  #compute-param-modal .param-toggle input[type="checkbox"] { display: none; }

  #compute-param-modal .toggle-track {
    width: 32px; height: 18px;
    background: #ccc;
    border-radius: 9px;
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
  }
  #compute-param-modal .toggle-track::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 12px; height: 12px;
    background: #475569;
    border-radius: 50%;
    transition: transform .2s, background .2s;
  }
  #compute-param-modal .param-toggle input:checked ~ .toggle-track { background: #1d4ed8; }
  #compute-param-modal .param-toggle input:checked ~ .toggle-track::after { transform: translateX(14px); background: #93c5fd; }

  #compute-param-modal .toggle-label {
    font-size: 12px;
    color: #94a3b8;
    flex: 1;
  }

  /* ── Unit hint ── */
  #compute-param-modal .field-unit {
    font-size: 10px;
    color: #334155;
    margin-left: 4px;
  }

  /* ── Error zone ── */
  #compute-param-modal #save-modal-content-err {
    color: #f87171;
    font-size: 12px;
    min-height: 0;
    padding: 0 0 4px;
  }
  #compute-param-modal #save-modal-content-err:not(:empty) { padding: 8px 0; }

  /* ── Footer ── */
  #compute-param-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 13px 22px;
    border-top: 1px solid #1e2232;
    margin-top: 6px;
    background: #282c3b;
  }

  #compute-param-modal .btn {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: .08em;
    padding: 9px 20px;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
  }

  #compute-param-modal .btn-ghost {
    background: none;
    border-color: #ccc;
    color: #ccc;
  }
  #compute-param-modal .btn-ghost:hover { border-color: #2a3455; color: #94a3b8; }

  #compute-param-modal .btn-primary {
    background: #1d4ed8;
    color: #fff;
    border-color: #2563eb;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  #compute-param-modal .btn-primary:hover { background: #2563eb; box-shadow: 0 0 16px rgba(37,99,235,.4); }
  #compute-param-modal .btn-primary svg { flex-shrink: 0; }