/* ── Upload Form ────────────────────────────────────────── */
.scripts-form-wrap { flex: 1; overflow-y: auto; padding: var(--space-5); }
.scripts-form-card { max-width: 620px; display: flex; flex-direction: column; gap: var(--space-4); }
.scripts-form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.scripts-form-group { display: flex; flex-direction: column; gap: var(--space-1); }

.scripts-form-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2);
}
.scripts-form-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
.scripts-id-hint   { font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.scripts-id-row    { display: flex; gap: var(--space-2); align-items: center; }

.req { color: var(--red); }
.opt { color: var(--text3); font-size: 9px; }

/* Cat New Btn — extends .btn.btn-ghost visually */
.scripts-cat-new-btn {
  padding: 9px var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text2); font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; white-space: nowrap; transition: all var(--transition-fast);
}
.scripts-cat-new-btn:hover { border-color: var(--accent); color: var(--accent); }
.scripts-cat-wrap { display: flex; gap: var(--space-2); }

/* ── Drop Zone ──────────────────────────────────────────── */
.scripts-drop-zone, .edit-drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  text-align: center; cursor: pointer;
  transition: all var(--transition-normal); background: var(--bg3);
}
.scripts-drop-zone { padding: var(--space-6); }
.edit-drop-zone    { padding: var(--space-4); }

.scripts-drop-zone:hover, .scripts-drop-zone.drag,
.edit-drop-zone:hover, .edit-drop-zone.drag {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.scripts-drop-zone.has-file .drop-icon, .scripts-drop-zone.has-file .drop-label,
.edit-drop-zone.has-file .drop-icon,    .edit-drop-zone.has-file .drop-label {
  color: var(--accent);
}
.drop-icon  { font-size: 24px; margin-bottom: var(--space-2); color: var(--text3); }
.drop-label { font-size: 13px; color: var(--text2); margin-bottom: var(--space-1); }
.drop-sub   { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }

/* ── Progress ───────────────────────────────────────────── */
.scripts-progress-wrap  { margin-top: var(--space-3); }
.scripts-progress-bar   {
  height: 3px; background: var(--bg3); border-radius: 2px;
  overflow: hidden; margin-bottom: var(--space-1);
}
.scripts-progress-fill  {
  height: 100%; background: var(--accent); border-radius: 2px;
  width: 0%; transition: width 0.3s;
}
.scripts-progress-label { font-family: var(--font-mono); font-size: 10px; color: var(--text2); }

/* ── Order ──────────────────────────────────────────────── */
.scripts-sequence-list {
  flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.sequence-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: grab;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  user-select: none;
}
.sequence-item:hover    { border-color: var(--border-active); }
.sequence-item.dragging { opacity: 0.4; }
.sequence-item.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.sequence-handle { color: var(--text3); font-size: 14px; cursor: grab; }
.sequence-num    { font-family: var(--font-mono); font-size: 10px; color: var(--text3); width: 20px; text-align: right; }
.sequence-id     { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); width: 40px; }
.sequence-title  { font-family: var(--font-ui); font-size: 13px; color: var(--text); flex: 1; }
.sequence-cat    { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }

/* ── AI WIP ─────────────────────────────────────────────── */
.scripts-ai-wrap {
  flex: 1; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: var(--space-3);
}
.scripts-ai-icon  { font-size: 40px; opacity: 0.2; }
.scripts-ai-label { font-family: var(--font-mono); font-size: 13px; color: var(--text3); }